Adam / gulu-admin

Browse Code »

Commit cf56a6c30fd2d9b8d0ce887f69895c474df818be

Authored by 吉鹏 2020-04-30 17:41:47 +0800

1 parent 80a28914e8

Exists in master

init role permission

Showing 10 changed files with 124 additions and 16 deletions Show diff stats

README-zh.md

Diff comments View file @cf56a6c

-如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
 ## 相关项目
 - [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
 - [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 - [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
 - [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
 写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:
 - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
 - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
 - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
 - [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
 - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
 ## Build Setup
 ```bash
 # 进入项目目录
 cd gulu-admin
 # 安装依赖
 npm install
 # 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
 npm install --registry=https://registry.npm.taobao.org
 # 启动服务
 npm run dev
 ```
 浏览器访问 [http://localhost:9528](http://localhost:9528)
 ## 发布
 ```bash
 # 构建测试环境
 npm run build:stage
 # 构建生产环境
 npm run build:prod
 ```
 ## 其它
 ```bash
 # 预览发布环境效果
 npm run preview
 # 预览发布环境效果 + 静态资源分析
 npm run preview -- --report
 # 代码格式检查
 npm run lint
 # 代码格式检查并自动修复
 npm run lint -- --fix
 ```
+更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
+## Demo
+![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)

README.md

Diff comments View file @cf56a6c

+## Build Setup
 ```bash
 # enter the project directory
 cd gulu-admin
 # install dependency
 npm install
 # develop
 npm run dev
 ```
 This will automatically open http://localhost:9528
 ## Build
 ```bash
 # build for test environment
 npm run build:stage
 # build for production environment
 npm run build:prod
 ```
 ## Advanced
 ```bash
 # preview the release environment effect
 npm run preview
 # preview the release environment effect + static resource analysis
 npm run preview -- --report
 # code format check
 npm run lint
 # code format check and auto fix
 npm run lint -- --fix
 ```
 Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information
 ## Demo
 ![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
 ## Extra
 If you want router permission && generate menu by user roles , you can use this branch [permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
 For `typescript` version, you can use [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))
 ## Related Project
 - [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
 - [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 - [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
 - [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
-## Browsers support

src/layout/components/Sidebar/index.vue

Diff comments View file @cf56a6c

 <template>
   <div :class="{'has-logo':showLogo}">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
         :collapse="isCollapse"
         :background-color="variables.menuBg"
         :text-color="variables.menuText"
         :unique-opened="false"
         :active-text-color="variables.menuActiveText"
         :collapse-transition="false"
         mode="vertical"
       >
-        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
+        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
 export default {
   components: { SidebarItem, Logo },
   computed: {
     ...mapGetters([
+      'permission_routes',
       'sidebar'
     ]),
-    routes() {
-      return this.$router.options.routes
-    },
     activeMenu() {
       const route = this.$route
       const { meta, path } = route
       // if set path, the sidebar will highlight the path you set
       if (meta.activeMenu) {
         return meta.activeMenu
       }
       return path
     },
     showLogo() {
       return this.$store.state.settings.sidebarLogo
     },
     variables() {
       return variables
     },
     isCollapse() {
       return !this.sidebar.opened
     }
   }
 }
 </script>

src/permission.js

Diff comments View file @cf56a6c

 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 getPageTitle from '@/utils/get-page-title'
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 const whiteList = ['/login'] // no redirect whitelist
 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: '/' })
       NProgress.done()
     } else {
-      const hasGetUserInfo = store.getters.name
+      // determine whether the user has obtained his permission roles through getInfo
-      if (hasGetUserInfo) {
+      const hasRoles = store.getters.roles && store.getters.roles.length > 0
+      if (hasRoles) {
         next()
       } else {
         try {
           // get user info
-          await store.dispatch('user/getInfo')
+          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
+          const { roles } = await store.dispatch('user/getInfo')
-          next()
+          // generate accessible routes map based on roles
+          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
+          // dynamically add accessible routes
+          router.addRoutes(accessRoutes)
+          // hack method to ensure that addRoutes is complete
+          // set the replace: true, so the navigation will not leave a history record
+          next({ ...to, replace: true })
         } catch (error) {
           // remove token and go to login page to re-login
           await store.dispatch('user/resetToken')
           Message.error(error || 'Has Error')
           next(`/login?redirect=${to.path}`)
           NProgress.done()
         }
       }
     }
   } else {
     /* has no token*/
     if (whiteList.indexOf(to.path) !== -1) {
       // in the free login whitelist, go directly
       next()
     } else {
       // other pages that do not have permission to access are redirected to the login page.
       next(`/login?redirect=${to.path}`)
       NProgress.done()
     }
   }
 })
 router.afterEach(() => {
   // finish progress bar
   NProgress.done()
 })

src/router/index.js

Diff comments View file @cf56a6c

 import Vue from 'vue'
 import Router from 'vue-router'
 Vue.use(Router)
 /* Layout */
 import Layout from '@/layout'
 /**
  * Note: sub-menu only appear when route children.length >= 1
  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
  *
  * hidden: true                   if set true, item will not show in the sidebar(default is false)
  * alwaysShow: true               if set true, will always show the root menu
  *                                if not set alwaysShow, when item has more than one children route,
  *                                it will becomes nested mode, otherwise not show the root menu
  * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
  * name:'router-name'             the name is used by <keep-alive> (must set!!!)
  * meta : {
     roles: ['admin','editor']    control the page roles (you can set multiple roles)
     title: 'title'               the name show in sidebar and breadcrumb (recommend set)
     icon: 'svg-name'             the icon show in the sidebar
     breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
     activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
   }
  */
 /**
  * constantRoutes
  * a base page that does not have permission requirements
  * all roles can be accessed
  */
 export const constantRoutes = [
   {
     path: '/login',
     component: () => import('@/views/login/index'),
     hidden: true
   },
   {
     path: '/404',
     component: () => import('@/views/404'),
     hidden: true
   },
   {
     path: '/',
     component: Layout,
     redirect: '/dashboard',
     children: [{
       path: 'dashboard',
       name: 'Dashboard',
       component: () => import('@/views/dashboard/index'),
       meta: { title: 'Dashboard', icon: 'dashboard' }
     }]
   },
   {
     path: '/example',
     component: Layout,
     redirect: '/example/table',
     name: 'Example',
     meta: { title: 'Example', icon: 'example' },
     children: [
       {
         path: 'table',
         name: 'Table',
         component: () => import('@/views/table/index'),
         meta: { title: 'Table', icon: 'table' }
       },
       {
         path: 'tree',
         name: 'Tree',
         component: () => import('@/views/tree/index'),
         meta: { title: 'Tree', icon: 'tree' }
       }
     ]
   },
   {
     path: '/form',
     component: Layout,
     children: [
       {
         path: 'index',
         name: 'Form',
         component: () => import('@/views/form/index'),
         meta: { title: 'Form', icon: 'form' }
       }
     ]
-  },
+  }
+]
+/**
+ * asyncRoutes
+ * the routes that need to be dynamically loaded based on user roles
+ */
+export const asyncRoutes = [
   {
     path: '/nested',
     component: Layout,
     redirect: '/nested/menu1',
     name: 'Nested',
     meta: {
       title: 'Nested',
       icon: 'nested'
     },
     children: [
       {
         path: 'menu1',
         component: () => import('@/views/nested/menu1/index'), // Parent router-view
         name: 'Menu1',
         meta: { title: 'Menu1' },
         children: [
           {
             path: 'menu1-1',
             component: () => import('@/views/nested/menu1/menu1-1'),
             name: 'Menu1-1',
             meta: { title: 'Menu1-1' }
           },
           {
             path: 'menu1-2',
             component: () => import('@/views/nested/menu1/menu1-2'),
             name: 'Menu1-2',
             meta: { title: 'Menu1-2' },
             children: [
               {
                 path: 'menu1-2-1',
                 component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
                 name: 'Menu1-2-1',
                 meta: { title: 'Menu1-2-1' }
               },
               {
                 path: 'menu1-2-2',
                 component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
                 name: 'Menu1-2-2',
                 meta: { title: 'Menu1-2-2' }
               }
             ]
           },
           {
             path: 'menu1-3',
             component: () => import('@/views/nested/menu1/menu1-3'),
             name: 'Menu1-3',
             meta: { title: 'Menu1-3' }
           }
         ]
       },
       {
         path: 'menu2',
         component: () => import('@/views/nested/menu2/index'),
         meta: { title: 'menu2' }
       }
     ]
   },
   {
     path: 'external-link',
     component: Layout,
     children: [
       {
         path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
         meta: { title: 'External Link', icon: 'link' }
       }
     ]
   },
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]
 const createRouter = () => new Router({
   // mode: 'history', // require service support
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRoutes
 })
 const router = createRouter()
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
 export function resetRouter() {
   const newRouter = createRouter()
   router.matcher = newRouter.matcher // reset router
 }
 export default router

src/store/getters.js

Diff comments View file @cf56a6c

 const getters = {
   sidebar: state => state.app.sidebar,
   device: state => state.app.device,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
-  name: state => state.user.name
+  name: state => state.user.name,
+  roles: state => state.user.roles,
+  permission_routes: state => state.permission.routes
 }
 export default getters

src/store/index.js

Diff comments View file @cf56a6c

 import Vue from 'vue'
 import Vuex from 'vuex'
 import getters from './getters'
 import app from './modules/app'
+import permission from './modules/permission'
 import settings from './modules/settings'
 import user from './modules/user'
 Vue.use(Vuex)
 const store = new Vuex.Store({
   modules: {
     app,
+    permission,
     settings,
     user
   },
   getters
 })
 export default store

src/store/modules/permission.js

Diff comments View file @cf56a6c

File was created	1	import { asyncRoutes, constantRoutes } from '@/router'
	2
	3	/**
	4	* Use meta.role to determine if the current user has permission
	5	* @param roles
	6	* @param route
	7	*/
	8	function hasPermission(roles, route) {
	9	if (route.meta && route.meta.roles) {
	10	return roles.some(role => route.meta.roles.includes(role))
	11	} else {
	12	return true
	13	}
	14	}
	15
	16	/**
	17	* Filter asynchronous routing tables by recursion
	18	* @param routes asyncRoutes
	19	* @param roles
	20	*/
	21	export function filterAsyncRoutes(routes, roles) {
	22	const res = []
	23
	24	routes.forEach(route => {
	25	const tmp = { ...route }
	26	if (hasPermission(roles, tmp)) {
	27	if (tmp.children) {
	28	tmp.children = filterAsyncRoutes(tmp.children, roles)
	29	}
	30	res.push(tmp)
	31	}
	32	})
	33
	34	return res
	35	}
	36
	37	const state = {
	38	routes: [],
	39	addRoutes: []
	40	}
	41
	42	const mutations = {
	43	SET_ROUTES: (state, routes) => {
	44	state.addRoutes = routes
	45	state.routes = constantRoutes.concat(routes)
	46	}
	47	}
	48
	49	const actions = {
	50	generateRoutes({ commit }, roles) {
	51	return new Promise(resolve => {
	52	let accessedRoutes
	53	if (roles.includes('admin')) {
	54	accessedRoutes = asyncRoutes \|\| []
	55	} else {
	56	accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
	57	}
	58	commit('SET_ROUTES', accessedRoutes)
	59	resolve(accessedRoutes)
	60	})
	61	}
	62	}
	63
	64	export default {
	65	namespaced: true,
	66	state,
	67	mutations,
	68	actions
	69	}
	70

src/store/modules/user.js

Diff comments View file @cf56a6c

 import { login, logout, getInfo } from '@/api/user'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 import { resetRouter } from '@/router'
 const getDefaultState = () => {
   return {
     token: getToken(),
     name: '',
-    avatar: ''
+    avatar: '',
+    roles: []
   }
 }
 const state = getDefaultState()
 const mutations = {
   RESET_STATE: (state) => {
     Object.assign(state, getDefaultState())
   },
   SET_TOKEN: (state, token) => {
     state.token = token
   },
   SET_NAME: (state, name) => {
     state.name = name
   },
   SET_AVATAR: (state, avatar) => {
     state.avatar = avatar
+  },
+  SET_ROLES: (state, roles) => {
+    state.roles = roles
   }
 }
 const actions = {
   // user login
   login({ commit }, userInfo) {
     const { username, password } = userInfo
     return new Promise((resolve, reject) => {
       login({ username: username.trim(), password: password }).then(response => {
         const { data } = response
         commit('SET_TOKEN', data.token)
         setToken(data.token)
         resolve()
       }).catch(error => {
         reject(error)
       })
     })
   },
   // get user info
   getInfo({ commit, state }) {
     return new Promise((resolve, reject) => {
       getInfo(state.token).then(response => {
         const { data } = response
         if (!data) {
           reject('Verification failed, please Login again.')
         }
-        const { name, avatar } = data
+        const { roles, name, avatar } = data
+        // roles must be a non-empty array
+        if (!roles || roles.length <= 0) {
+          reject('getInfo: roles must be a non-null array!')
+        }
+        commit('SET_ROLES', roles)
         commit('SET_NAME', name)
         commit('SET_AVATAR', avatar)
         resolve(data)
       }).catch(error => {
         reject(error)
       })
     })
   },
   // user logout
   logout({ commit, state }) {
     return new Promise((resolve, reject) => {
       logout(state.token).then(() => {
         removeToken() // must remove  token  first
         resetRouter()
         commit('RESET_STATE')
         resolve()
       }).catch(error => {
         reject(error)
       })
     })
   },
   // remove token
   resetToken({ commit }) {
     return new Promise(resolve => {
       removeToken() // must remove  token  first
       commit('RESET_STATE')
       resolve()
     })
   }
 }
 export default {
   namespaced: true,
   state,
   mutations,
   actions
 }

src/views/dashboard/index.vue

Diff comments View file @cf56a6c

 <template>
   <div class="dashboard-container">
     <div class="dashboard-text">name: {{ name }}</div>
+    <div class="dashboard-text">roles: <span v-for="role in roles" :key="role">{{ role }}</span></div>
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex'
 export default {
   name: 'Dashboard',
   computed: {
     ...mapGetters([
-      'name'
+      'name',
+      'roles'
     ])
   }
 }
 </script>
 <style lang="scss" scoped>
 .dashboard {
   &-container {
     margin: 30px;
   }
   &-text {
     font-size: 30px;
     line-height: 46px;
   }
 }
 </style>