From c679a04db341b5c67e9acc3a6eace67ef7e04a09 Mon Sep 17 00:00:00 2001 From: jmal Date: Mon, 11 Jan 2021 18:02:57 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E4=BB=8E=E5=90=8E?= =?UTF-8?q?=E7=AB=AF=E8=8E=B7=E5=8F=96=E5=8A=A8=E6=80=81=E8=B7=AF=E7=94=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ParentView/index.vue | 3 + src/layout/components/Sidebar/SidebarItem.vue | 6 +- src/permission.js | 53 ++- src/router/index.js | 435 +++++++++--------- src/store/getters.js | 3 +- src/store/modules/user.js | 93 ++++ src/views/setting/sys/menuManager.vue | 1 + src/views/setting/sys/roleManager.vue | 44 +- 8 files changed, 399 insertions(+), 239 deletions(-) create mode 100644 src/components/ParentView/index.vue diff --git a/src/components/ParentView/index.vue b/src/components/ParentView/index.vue new file mode 100644 index 0000000..98240ae --- /dev/null +++ b/src/components/ParentView/index.vue @@ -0,0 +1,3 @@ + diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue index 810857a..401f725 100644 --- a/src/layout/components/Sidebar/SidebarItem.vue +++ b/src/layout/components/Sidebar/SidebarItem.vue @@ -6,9 +6,9 @@ - - - + + + diff --git a/src/permission.js b/src/permission.js index b9a6119..d211e3f 100644 --- a/src/permission.js +++ b/src/permission.js @@ -1,41 +1,46 @@ import router from './router' import store from './store' import { Message } from 'element-ui' -import NProgress from 'nprogress' // progress bar -import 'nprogress/nprogress.css' // progress bar style -import { getToken } from '@/utils/auth' // get token from cookie +import NProgress from 'nprogress' // 进度条 +import 'nprogress/nprogress.css' // 进度条样式 +import { getToken } from '@/utils/auth' // 认证获取token import getPageTitle from '@/utils/get-page-title' -NProgress.configure({ showSpinner: false }) // NProgress Configuration +NProgress.configure({ showSpinner: false }) // NProgress配置 -const whiteList = ['/login','/articles','/s','/s_m','/articles/article','/share'] // no redirect whitelist +const whiteList = ['/login','/s','/s_m','/share'] // 白名单 router.beforeEach(async(to, from, next) => { - // start progress bar + // 开始进度条 NProgress.start() - // set page title + // 设置页面标题 document.title = getPageTitle(to.meta.title) - // determine whether the user has logged in + // 确认用户是否已登录 const hasToken = getToken() if (hasToken) { + // 已登录的情况 if (to.path === '/login') { - // if is logged in, redirect to the home page - next({ path: '/' }) + // 登陆页面 + // 如果已登录，则重定向到主页 + setMenuList(next, { path: '/' }) NProgress.done() } else { + // 非登陆页面 const hasGetUserInfo = store.getters.name if (hasGetUserInfo) { - next() + // 存在用户信息 + setMenuList(next) } else { + // 不存在用户信息 try { - // get user info + // 获取用户信息 await store.dispatch('user/getInfo') - next() + setMenuList(next) } catch { - // remove token and go to login page to re-login + // 删除token，然后转到登录页面重新登录 await store.dispatch('user/resetToken') next(`/login?redirect=${to.path}`) NProgress.done() @@ -43,19 +48,31 @@ router.beforeEach(async(to, from, next) => { } } } else { - /* has no token*/ + // 没有登陆的情况 if (whiteList.indexOf(to.path) !== -1) { - // in the free login whitelist, go directly + // 没有token但是在白名单中，直接进入 next() } else { - // other pages that do not have permission to access are redirected to the login page. + // 其他没有token重定向到登录页面。 next(`/login?redirect=${to.path}`) NProgress.done() } } }) +function setMenuList(next, to){ + console.log('menuList', to, store.getters.menuList) + if(store.getters.menuList.length == 0){ + store.dispatch('user/setMenuList').then(res => { + console.log('res', res) + next({path:store.getters.menuList[0].path}) + }) + } else { + next(to) + } +} + router.afterEach(() => { - // finish progress bar + // 完成进度条 NProgress.done() }) diff --git a/src/router/index.js b/src/router/index.js index 752c7ed..23da61b 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -48,220 +48,220 @@ export const constantRoutes = [ hidden: true }, - { - path: '/', - component: Layout, - redirect: '/home', - children: [{ - path: '', - name: 'Home', - component: () => import('@/views/home/index'), - meta: { title: '所有文件', icon: 'ziyuan' } - }] - }, - { - path: '/recently', - component: Layout, - redirect: '/recently', - children: [ - { - path: '', - name: 'recently', - component: () => import('@/views/recently/index'), - meta: { title: '最近', icon: 'zuijinyuedu' } - } - ] - }, - - { - path: '/favorite', - component: Layout, - children: [ - { - path: 'index', - name: 'Form', - component: () => import('@/views/favorite/index'), - meta: { title: '收藏', icon: 'Favoritestarrate' } - } - ] - }, - - { - path: '/share', - component: Layout, - children: [ - { - path: '', - name: 'share', - component: () => import('@/views/share/index'), - meta: { title: '分享', icon: 'gongxiangzhongxin' } - } - ] - }, - - { - path: '/audio', - component: Layout, - redirect: '/audio', - children: [ - { - path: '', - name: 'audio', - component: () => import('@/views/fileType/audio'), - meta: { title: '音乐', icon: 'audio' } - } - ] - }, - { - path: '/video', - component: Layout, - redirect: '/video', - children: [ - { - path: '', - name: 'video', - component: () => import('@/views/fileType/video'), - meta: { title: '视频', icon: 'video' } - } - ] - }, - { - path: '/image', - component: Layout, - redirect: '/image', - children: [ - { - path: '', - name: 'image', - component: () => import('@/views/fileType/image'), - meta: { title: '图片', icon: 'image' } - } - ] - }, - { - path: '/document', - component: Layout, - redirect: '/document', - children: [ - { - path: '', - name: 'document', - component: () => import('@/views/fileType/document'), - meta: { title: '文档', icon: 'document' } - } - ] - }, - { - path: '/markdown', - component: Layout, - hidden: true, - children: [ - { - path: 'editor', - name: 'markdown', - component: () => import('@/views/markdown/index'), - meta: { title: '创建文档', icon: 'md' } - } - ] - }, - { - path: '/setting/user', - component: Layout, - children: [ - { - path: '', - name: 'setting-user', - component: () => import('@/views/setting/sys/cusomerInfo'), - meta: { title: '个人信息' , icon: 'UserSettings'} - } - ] - }, - { - path: '/setting/manager-users', - component: Layout, - children: [ - { - path: '', - name: 'manager-users', - component: () => import('@/views/setting/sys/cusomerManager'), - meta: { title: '用户管理' , icon: 'huaban'} - } - ] - }, - { - path: '/setting/manager-roles', - component: Layout, - children: [ - { - path: '', - name: 'manager-roles', - component: () => import('@/views/setting/sys/roleManager'), - meta: { title: '角色管理' , icon: 'role'} - } - ] - }, - { - path: '/setting/manager-menus', - component: Layout, - children: [ - { - path: '', - name: 'manager-menus', - component: () => import('@/views/setting/sys/menuManager'), - meta: { title: '菜单管理' , icon: 'menu'} - } - ] - }, - { - path: '/setting/website', - component: Layout, - name: 'website', - meta: { title: '网站管理', icon: 'wangzhanguanli'}, - children: [ - { - path: 'manager-articles', - name: 'manager-articles', - component: () => import('@/views/setting/articles/articlePageManager'), - meta: { title: '文章' , icon: 'guanlizhuanjiawenzhang'} - }, - { - path: 'manager-alone-page', - name: 'manager-alone-page', - component: () => import('@/views/setting/articles/alonePageManager'), - meta: { title: '独立页面' , icon: 'yemianshezhi'} - }, - { - path: 'manager-blog', - name: 'manager-blog', - component: () => import('@/views/setting/articles/blogManager'), - meta: { title: '外观' , icon: 'pifu'} - }, - { - path: 'manager-categories', - name: 'manager-categories', - component: () => import('@/views/setting/articles/categoryManager'), - meta: { title: '分类', icon: 'fenlei' } - }, - { - path: 'manager-tags', - name: 'manager-tags', - component: () => import('@/views/setting/articles/tagManager'), - meta: { title: '标签', icon: 'biaoqian' } - } - ] - }, - { - path: '/setting/manager-cloud', - component: Layout, - children: [ - { - path: '', - name: 'manager-cloud', - component: () => import('@/views/setting/cloudManager'), - meta: { title: '网盘设置', icon: 'yunshezhi' } - } - ] - }, + // { + // path: '/', + // component: Layout, + // redirect: '/home', + // children: [{ + // path: '', + // name: 'Home', + // component: () => import('@/views/home/index'), + // meta: { title: '所有文件', icon: 'ziyuan' } + // }] + // }, + // { + // path: '/recently', + // component: Layout, + // redirect: '/recently', + // children: [ + // { + // path: '', + // name: 'recently', + // component: () => import('@/views/recently/index'), + // meta: { title: '最近', icon: 'zuijinyuedu' } + // } + // ] + // }, + // + // { + // path: '/favorite', + // component: Layout, + // children: [ + // { + // path: 'index', + // name: 'Form', + // component: () => import('@/views/favorite/index'), + // meta: { title: '收藏', icon: 'Favoritestarrate' } + // } + // ] + // }, + // + // { + // path: '/share', + // component: Layout, + // children: [ + // { + // path: '', + // name: 'share', + // component: () => import('@/views/share/index'), + // meta: { title: '分享', icon: 'gongxiangzhongxin' } + // } + // ] + // }, + // + // { + // path: '/audio', + // component: Layout, + // redirect: '/audio', + // children: [ + // { + // path: '', + // name: 'audio', + // component: () => import('@/views/fileType/audio'), + // meta: { title: '音乐', icon: 'audio' } + // } + // ] + // }, + // { + // path: '/video', + // component: Layout, + // redirect: '/video', + // children: [ + // { + // path: '', + // name: 'video', + // component: () => import('@/views/fileType/video'), + // meta: { title: '视频', icon: 'video' } + // } + // ] + // }, + // { + // path: '/image', + // component: Layout, + // redirect: '/image', + // children: [ + // { + // path: '', + // name: 'image', + // component: () => import('@/views/fileType/image'), + // meta: { title: '图片', icon: 'image' } + // } + // ] + // }, + // { + // path: '/document', + // component: Layout, + // redirect: '/document', + // children: [ + // { + // path: '', + // name: 'document', + // component: () => import('@/views/fileType/document'), + // meta: { title: '文档', icon: 'document' } + // } + // ] + // }, + // { + // path: '/markdown', + // component: Layout, + // hidden: true, + // children: [ + // { + // path: 'editor', + // name: 'markdown', + // component: () => import('@/views/markdown/index'), + // meta: { title: '创建文档', icon: 'md' } + // } + // ] + // }, + // { + // path: '/setting/user', + // component: Layout, + // children: [ + // { + // path: '', + // name: 'setting-user', + // component: () => import('@/views/setting/sys/cusomerInfo'), + // meta: { title: '个人信息' , icon: 'UserSettings'} + // } + // ] + // }, + // { + // path: '/setting/manager-users', + // component: Layout, + // children: [ + // { + // path: '', + // name: 'manager-users', + // component: () => import('@/views/setting/sys/cusomerManager'), + // meta: { title: '用户管理' , icon: 'huaban'} + // } + // ] + // }, + // { + // path: '/setting/manager-roles', + // component: Layout, + // children: [ + // { + // path: '', + // name: 'manager-roles', + // component: () => import('@/views/setting/sys/roleManager'), + // meta: { title: '角色管理' , icon: 'role'} + // } + // ] + // }, + // { + // path: '/setting/manager-menus', + // component: Layout, + // children: [ + // { + // path: '', + // name: 'manager-menus', + // component: () => import('@/views/setting/sys/menuManager'), + // meta: { title: '菜单管理' , icon: 'menu'} + // } + // ] + // }, + // { + // path: '/setting/website', + // component: Layout, + // name: 'website', + // meta: { title: '网站管理', icon: 'wangzhanguanli'}, + // children: [ + // { + // path: 'manager-articles', + // name: 'manager-articles', + // component: () => import('@/views/setting/articles/articlePageManager'), + // meta: { title: '文章' , icon: 'guanlizhuanjiawenzhang'} + // }, + // { + // path: 'manager-alone-page', + // name: 'manager-alone-page', + // component: () => import('@/views/setting/articles/alonePageManager'), + // meta: { title: '独立页面' , icon: 'yemianshezhi'} + // }, + // { + // path: 'manager-blog', + // name: 'manager-blog', + // component: () => import('@/views/setting/articles/blogManager'), + // meta: { title: '外观' , icon: 'pifu'} + // }, + // { + // path: 'manager-categories', + // name: 'manager-categories', + // component: () => import('@/views/setting/articles/categoryManager'), + // meta: { title: '分类', icon: 'fenlei' } + // }, + // { + // path: 'manager-tags', + // name: 'manager-tags', + // component: () => import('@/views/setting/articles/tagManager'), + // meta: { title: '标签', icon: 'biaoqian' } + // } + // ] + // }, + // { + // path: '/setting/manager-cloud', + // component: Layout, + // children: [ + // { + // path: '', + // name: 'manager-cloud', + // component: () => import('@/views/setting/cloudManager'), + // meta: { title: '网盘设置', icon: 'yunshezhi' } + // } + // ] + // }, { path: '/s', component: Layout, @@ -340,10 +340,13 @@ const createRouter = () => new Router({ const router = createRouter() // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 -export function resetRouter() { +export function resetRouter(params) { const newRouter = createRouter() + // router.matcher = newRouter.matcher // reset router + if(params){ + newRouter.addRoutes(params) + } newRouter.addRoutes(dynamicRouters) - router.matcher = newRouter.matcher // reset router } router.addRoutes(dynamicRouters) export default router diff --git a/src/store/getters.js b/src/store/getters.js index 0551790..2541763 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -5,6 +5,7 @@ const getters = { avatar: state => state.user.avatar, name: state => state.user.name, showName: state => state.user.showName, - userId: state => state.user.userId + userId: state => state.user.userId, + menuList: state => state.user.menuList, } export default getters diff --git a/src/store/modules/user.js b/src/store/modules/user.js index 6bcbd94..c45c1e3 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -1,6 +1,11 @@ import { login, logout, getInfo } from '@/api/user' +import menuApi from '@/api/menu' import { getToken, setToken, getConsumerId, setConsumerId, removeToken, removeConsumerId , setRememberName, removeRememberName } from '@/utils/auth' import { resetRouter } from '@/router' +import getters from "@/store/getters" +import router from '@/router' +import Layout from '@/layout' +import ParentView from '@/components/ParentView' const getDefaultState = () => { return { @@ -9,6 +14,7 @@ const getDefaultState = () => { showName: '', avatar: '', userId: getConsumerId(), + menuList: [] } } @@ -32,10 +38,35 @@ const mutations = { }, SET_USERID: (state, userId) => { state.userId = userId + }, + SET_MENU_LIST:(state,menuList) => { + state.menuList = menuList; } } const actions = { + + async setMenuList({ commit, state }) { + let noeFound = []; + return new Promise( (resolve,reject) => { + noeFound = [] + menuApi.menuTree({userId: getters.userId}).then((res) => { + let data = res.data; + let mentTree = getMenuTree(data, []); + console.log('mentTree', mentTree); + state.menuList = mentTree.concat(noeFound); + commit('SET_MENU_LIST',state.menuList); + router.addRoutes(state.menuList) + console.log('state.menuList', state.menuList) + router.options.routes = router.options.routes.concat(state.menuList); + console.log('router',router); + resolve(res) + }).catch(error => { + reject(error) + }); + } ) + }, + // user login login({ commit }, userInfo) { const { username, password, rememberMe } = userInfo @@ -110,6 +141,68 @@ const actions = { } } +function getMenuTree(menuList, arr) { + console.log('mentTreeData', menuList) + arr = menuList.map((menu, index) => { + let router = {} + if(menu.children && menu.children.length){ + router.children = findChildren(menu.children) + } + if(menu.component && menu.component.length > 0) { + router.children = [ + { + path: '', + name: menu.name, + component: loadView(menu.component), + meta: {title: menu.name, icon: menu.icon} + } + ] + } + router.path = menu.path + router.component = Layout + return router + }); + return arr; +} + +function findChildren(childrenMenu){ + let children = [] + childrenMenu.forEach((menu, index) => { + if(menu.children && menu.children.length){ + if(!menu.component || menu.component.length === 0){ + menu.children.forEach(c => { + let router = {} + router.path = c.path + router.name = c.name + router.component = loadView(c.component) + router.meta = { + title: c.name, + icon: c.icon + } + if(c.children && c.children.length){ + children = children.concat(findChildren(c.children, c)) + return + } + children.push(router) + }) + return + } + } + let router = { + path: menu.path, + name: menu.name, + component: loadView(menu.component), + meta: {title: menu.name, icon: menu.icon} + } + children = children.concat(router) + }) + return children +} + +export const loadView = (view) => { + return (resolve) => require([`@/views${view}`], resolve) +} + export default { namespaced: true, state, diff --git a/src/views/setting/sys/menuManager.vue b/src/views/setting/sys/menuManager.vue index 2db820b..d294c9c 100644 --- a/src/views/setting/sys/menuManager.vue +++ b/src/views/setting/sys/menuManager.vue @@ -235,6 +235,7 @@ export default { } } data.delete("createTime") + data.delete("updateTime") return data }, // 保存 diff --git a/src/views/setting/sys/roleManager.vue b/src/views/setting/sys/roleManager.vue index d993630..e606c99 100644 --- a/src/views/setting/sys/roleManager.vue +++ b/src/views/setting/sys/roleManager.vue @@ -17,6 +17,21 @@ 保 存 + + + +
+ 取 消 + 保 存 +
+
@@ -64,6 +79,7 @@