feat[litemall-admin]: 前端的权限校验逻辑从roles换成perms

litemall-admin/src/directive/permission/permission.js

@@ -4,20 +4,20 @@ import store from '@/store'
 export default{
   inserted(el, binding, vnode) {
     const { value } = binding
-    const roles = store.getters && store.getters.roles
+    const perms = store.getters && store.getters.perms
 
     if (value && value instanceof Array && value.length > 0) {
-      const permissionRoles = value
+      const permissions = value
 
-      const hasPermission = roles.some(role => {
-        return permissionRoles.includes(role)
+      const hasPermission = perms.some(perm => {
+        return permissions.includes(perm)
       })
 
       if (!hasPermission) {
         el.parentNode && el.parentNode.removeChild(el)
       }
     } else {
-      throw new Error(`need roles! Like v-permission="['admin','editor']"`)
+      throw new Error(`need perms! Like v-permission="['GET /aaa','POST /bbb']"`)
     }
   }
 }

litemall-admin/src/lang/en.js

@@ -87,6 +87,7 @@ export default {
   },
   permission: {
     roles: 'Your roles',
+    perms: 'Your permissions',
     switchRoles: 'Switch roles'
   },
   guide: {

litemall-admin/src/lang/zh.js

@@ -86,8 +86,9 @@ export default {
     github: 'Github 地址'
   },
   permission: {
-    roles: '你的权限',
-    switchRoles: '切换权限'
+    roles: '你的角色',
+    perms: '你的权限',
+    switchRoles: '切换角色'
   },
   guide: {
     description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',

litemall-admin/src/permission.js

@@ -8,10 +8,10 @@ import { getToken } from '@/utils/auth' // getToken from cookie
 NProgress.configure({ showSpinner: false })// NProgress Configuration
 
 // permission judge function
-function hasPermission(roles, permissionRoles) {
-  if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
-  if (!permissionRoles) return true
-  return roles.some(role => permissionRoles.indexOf(role) >= 0)
+function hasPermission(perms, permissions) {
+  if (perms.indexOf('*') >= 0) return true // admin permission passed directly
+  if (!permissions) return true
+  return perms.some(perm => permissions.indexOf(perm) >= 0)
 }
 
 const whiteList = ['/login', '/auth-redirect']// no redirect whitelist
@@ -24,10 +24,10 @@ router.beforeEach((to, from, next) => {
       next({ path: '/' })
       NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
     } else {
-      if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
+      if (store.getters.perms.length === 0) { // 判断当前用户是否已拉取完user_info信息
         store.dispatch('GetUserInfo').then(res => { // 拉取user_info
-          const roles = res.data.data.roles // note: roles must be a array! such as: ['editor','develop']
-          store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
+          const perms = res.data.data.perms // note: perms must be a array! such as: ['GET /aaa','POST /bbb']
+          store.dispatch('GenerateRoutes', { perms }).then(() => { // 根据perms权限生成可访问的路由表
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
@@ -39,7 +39,7 @@ router.beforeEach((to, from, next) => {
         })
       } else {
         // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
-        if (hasPermission(store.getters.roles, to.meta.roles)) {
+        if (hasPermission(store.getters.perms, to.meta.perms)) {
           next()
         } else {
           next({ path: '/401', replace: true, query: { noGoBack: true }})

litemall-admin/src/router/index.js

@@ -18,7 +18,7 @@ import Layout from '@/views/layout/Layout'
 * redirect: noredirect           if `redirect:noredirect` will no redirect in the breadcrumb
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)
 * meta : {
-    roles: ['admin','editor']     will control the page roles (you can set multiple roles)
+    perms: ['GET /aaa','POST /bbb']     will control the page perms (you can set multiple perms)
     title: 'title'               the name show in submenu and breadcrumb (recommend set)
     icon: 'svg-name'             the icon show in the sidebar,
     noCache: true                if true ,the page will no be cached(default is false)

litemall-admin/src/store/getters.js

@@ -11,6 +11,7 @@ const getters = {
   introduction: state => state.user.introduction,
   status: state => state.user.status,
   roles: state => state.user.roles,
+  perms: state => state.user.perms,
   setting: state => state.user.setting,
   permission_routers: state => state.permission.routers,
   addRouters: state => state.permission.addRouters

litemall-admin/src/store/modules/permission.js

@@ -1,13 +1,13 @@
 import { asyncRouterMap, constantRouterMap } from '@/router'
 
 /**
- * 通过meta.role判断是否与当前用户权限匹配
- * @param roles
+ * 通过meta.perms判断是否与当前用户权限匹配
+ * @param perms
  * @param route
  */
-function hasPermission(roles, route) {
-  if (route.meta && route.meta.roles) {
-    return roles.some(role => route.meta.roles.includes(role))
+function hasPermission(perms, route) {
+  if (route.meta && route.meta.perms) {
+    return perms.some(perm => route.meta.perms.includes(perm))
   } else {
     return true
   }
@@ -16,16 +16,16 @@ function hasPermission(roles, route) {
 /**
  * 递归过滤异步路由表，返回符合用户角色权限的路由表
  * @param routes asyncRouterMap
- * @param roles
+ * @param perms
  */
-function filterAsyncRouter(routes, roles) {
+function filterAsyncRouter(routes, perms) {
   const res = []
 
   routes.forEach(route => {
     const tmp = { ...route }
-    if (hasPermission(roles, tmp)) {
+    if (hasPermission(perms, tmp)) {
       if (tmp.children) {
-        tmp.children = filterAsyncRouter(tmp.children, roles)
+        tmp.children = filterAsyncRouter(tmp.children, perms)
       }
       res.push(tmp)
     }
@@ -48,12 +48,12 @@ const permission = {
   actions: {
     GenerateRoutes({ commit }, data) {
       return new Promise(resolve => {
-        const { roles } = data
+        const { perms } = data
         let accessedRouters
-        if (roles.includes('admin')) {
+        if (perms.includes('*')) {
           accessedRouters = asyncRouterMap
         } else {
-          accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
+          accessedRouters = filterAsyncRouter(asyncRouterMap, perms)
         }
         commit('SET_ROUTERS', accessedRouters)
         resolve()

litemall-admin/src/store/modules/user.js

@@ -11,6 +11,7 @@ const user = {
     avatar: '',
     introduction: '',
     roles: [],
+    perms: [],
     setting: {
       articlePlatform: []
     }
@@ -40,6 +41,9 @@ const user = {
     },
     SET_ROLES: (state, roles) => {
       state.roles = roles
+    },
+    SET_PERMS: (state, perms) => {
+      state.perms = perms
     }
   },
 
@@ -65,12 +69,13 @@ const user = {
         getUserInfo(state.token).then(response => {
           const data = response.data.data
 
-          if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
-            commit('SET_ROLES', data.roles)
+          if (data.perms && data.perms.length > 0) { // 验证返回的perms是否是一个非空数组
+            commit('SET_PERMS', data.perms)
           } else {
-            reject('getInfo: roles must be a non-null array !')
+            reject('getInfo: perms must be a non-null array !')
           }
 
+          commit('SET_ROLES', data.roles)
           commit('SET_NAME', data.name)
           commit('SET_AVATAR', data.avatar)
           commit('SET_INTRODUCTION', data.introduction)
@@ -101,6 +106,7 @@ const user = {
         logout(state.token).then(() => {
           commit('SET_TOKEN', '')
           commit('SET_ROLES', [])
+          commit('SET_PERMS', [])
           removeToken()
           resolve()
         }).catch(error => {
@@ -126,6 +132,7 @@ const user = {
         getUserInfo(role).then(response => {
           const data = response.data
           commit('SET_ROLES', data.roles)
+          commit('SET_PERMS', data.perms)
           commit('SET_NAME', data.name)
           commit('SET_AVATAR', data.avatar)
           commit('SET_INTRODUCTION', data.introduction)

litemall-admin/src/utils/permission.js

@@ -7,11 +7,11 @@ import store from '@/store'
  */
 export default function checkPermission(value) {
   if (value && value instanceof Array && value.length > 0) {
-    const roles = store.getters && store.getters.roles
-    const permissionRoles = value
+    const perms = store.getters && store.getters.perms
+    const permissions = value
 
-    const hasPermission = roles.some(role => {
-      return permissionRoles.includes(role)
+    const hasPermission = perms.some(perm => {
+      return permissions.includes(perm)
     })
 
     if (!hasPermission) {
@@ -19,7 +19,7 @@ export default function checkPermission(value) {
     }
     return true
   } else {
-    console.error(`need roles! Like v-permission="['admin','editor']"`)
+    console.error(`need perms! Like v-permission="['GET /aaa','POST /bbb']"`)
     return false
   }
 }