add auth module

Author: ovenx

mock/user.js

@@ -11,12 +11,16 @@ const tokens = {
 const users = {
   'admin-token': {
     roles: ['admin'],
+    auths: [
+      'icon:view', 'example:view'
+    ],
     introduction: 'I am a super administrator',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     name: 'Super Admin'
   },
   'editor-token': {
     roles: ['editor'],
+    auths: [],
     introduction: 'I am an editor',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     name: 'Normal Editor'

src/directive/index.js

@@ -0,0 +1,18 @@
+import checkAuth from '@/utils/permission'
+
+export default (Vue) => {
+  Vue.directive('auth', {
+    inserted: (el, binding) => {
+      if (!checkAuth(binding.value)) {
+        el.remove()
+      }
+    }
+  })
+  Vue.directive('auth-all', {
+    inserted: (el, binding) => {
+      if (!checkAuth(binding.value, true)) {
+        el.remove()
+      }
+    }
+  })
+}

src/main.js

@@ -20,6 +20,8 @@ import './utils/error-log' // error log
 
 import * as filters from './filters' // global filters
 
+import directive from '@/directive/index.js'
+Vue.use(directive)
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/permission.js

@@ -27,17 +27,17 @@ router.beforeEach(async(to, from, next) => {
       NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
     } else {
       // determine whether the user has obtained his permission roles through getInfo
-      const hasRoles = store.getters.roles && store.getters.roles.length > 0
-      if (hasRoles) {
+      const hasAuths = store.getters.auths && store.getters.roles.length > 0
+      if (hasAuths) {
         next()
       } else {
         try {
           // get user info
           // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
-          const { roles } = await store.dispatch('user/getInfo')
+          const { auths } = await store.dispatch('user/getInfo')
 
           // generate accessible routes map based on roles
-          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
+          const accessRoutes = await store.dispatch('permission/generateRoutes', auths)
 
           // dynamically add accessible routes
           router.addRoutes(accessRoutes)

src/router/index.js

@@ -137,8 +137,7 @@ export const asyncRoutes = [
     name: 'Permission',
     meta: {
       title: 'Permission',
-      icon: 'lock',
-      roles: ['admin', 'editor'] // you can set roles in root nav
+      icon: 'lock'
     },
     children: [
       {
@@ -197,14 +196,16 @@ export const asyncRoutes = [
     name: 'Example',
     meta: {
       title: 'Example',
-      icon: 'el-icon-s-help'
+      icon: 'el-icon-s-help',
+      auth: ['example:view']
     },
+    alwaysShow: true,
     children: [
       {
         path: 'create',
         component: () => import('@/views/example/create'),
         name: 'CreateArticle',
-        meta: { title: 'Create Article', icon: 'edit' }
+        meta: { title: 'Create Article', icon: 'edit', auth: ['example:add'] }
       },
       {
         path: 'edit/:id(\\d+)',
@@ -217,7 +218,7 @@ export const asyncRoutes = [
         path: 'list',
         component: () => import('@/views/example/list'),
         name: 'ArticleList',
-        meta: { title: 'Article List', icon: 'list' }
+        meta: { title: 'Article List', icon: 'list', auth: ['example:view'] }
       }
     ]
   },

src/store/getters.js

@@ -9,7 +9,13 @@ const getters = {
   name: state => state.user.name,
   introduction: state => state.user.introduction,
   roles: state => state.user.roles,
+  auths: state => state.user.auths,
   permission_routes: state => state.permission.routes,
-  errorLogs: state => state.errorLog.logs
+  errorLogs: state => state.errorLog.logs,
+  hasAuthorization: state => authorization => {
+    return state.authorization.some(auth => {
+      return auth === authorization
+    })
+  }
 }
 export default getters

src/store/modules/permission.js

@@ -5,9 +5,21 @@ import { asyncRoutes, constantRoutes } from '@/router'
  * @param roles
  * @param route
  */
-function hasPermission(roles, route) {
-  if (route.meta && route.meta.roles) {
-    return roles.some(role => route.meta.roles.includes(role))
+// function hasPermission(roles, route) {
+//   if (route.meta && route.meta.roles) {
+//     return roles.some(role => route.meta.roles.includes(role))
+//   } else {
+//     return true
+//   }
+// }
+
+function hasAuthorization(authorization, route) {
+  if (route.meta && route.meta.auth) {
+    return authorization.some(auth => {
+      return route.meta.auth.some(routeAuth => {
+        return routeAuth === auth
+      })
+    })
   } else {
     return true
   }
@@ -18,14 +30,14 @@ function hasPermission(roles, route) {
  * @param routes asyncRoutes
  * @param roles
  */
-export function filterAsyncRoutes(routes, roles) {
+export function filterAsyncRoutes(routes, auths) {
   const res = []
 
   routes.forEach(route => {
     const tmp = { ...route }
-    if (hasPermission(roles, tmp)) {
+    if (hasAuthorization(auths, tmp)) {
       if (tmp.children) {
-        tmp.children = filterAsyncRoutes(tmp.children, roles)
+        tmp.children = filterAsyncRoutes(tmp.children, auths)
       }
       res.push(tmp)
     }
@@ -47,14 +59,10 @@ const mutations = {
 }
 
 const actions = {
-  generateRoutes({ commit }, roles) {
+  generateRoutes({ commit }, auths) {
+    console.log(auths)
     return new Promise(resolve => {
-      let accessedRoutes
-      if (roles.includes('admin')) {
-        accessedRoutes = asyncRoutes || []
-      } else {
-        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
-      }
+      const accessedRoutes = filterAsyncRoutes(asyncRoutes, auths)
       commit('SET_ROUTES', accessedRoutes)
       resolve(accessedRoutes)
     })

src/store/modules/user.js

@@ -7,7 +7,8 @@ const state = {
   name: '',
   avatar: '',
   introduction: '',
-  roles: []
+  roles: [],
+  auths: []
 }
 
 const mutations = {
@@ -25,6 +26,9 @@ const mutations = {
   },
   SET_ROLES: (state, roles) => {
     state.roles = roles
+  },
+  SET_AUTHS: (state, auths) => {
+    state.auths = auths
   }
 }
 
@@ -54,14 +58,15 @@ const actions = {
           reject('Verification failed, please Login again.')
         }
 
-        const { roles, name, avatar, introduction } = data
+        const { roles, auths, name, avatar, introduction } = data
 
         // roles must be a non-empty array
-        if (!roles || roles.length <= 0) {
-          reject('getInfo: roles must be a non-null array!')
+        if (!auths || auths.length <= 0) {
+          reject('getInfo: auths must be a non-null array!')
         }
 
         commit('SET_ROLES', roles)
+        commit('SET_AUTHS', auths)
         commit('SET_NAME', name)
         commit('SET_AVATAR', avatar)
         commit('SET_INTRODUCTION', introduction)
@@ -78,6 +83,7 @@ const actions = {
       logout(state.token).then(() => {
         commit('SET_TOKEN', '')
         commit('SET_ROLES', [])
+        commit('SET_AUTHS', [])
         removeToken()
         resetRouter()
 
@@ -97,6 +103,7 @@ const actions = {
     return new Promise(resolve => {
       commit('SET_TOKEN', '')
       commit('SET_ROLES', [])
+      commit('SET_AUTHS', [])
       removeToken()
       resolve()
     })

src/utils/permission.js

@@ -5,17 +5,25 @@ import store from '@/store'
  * @returns {Boolean}
  * @example see @/views/permission/directive.vue
  */
-export default function checkPermission(value) {
-  if (value && value instanceof Array && value.length > 0) {
-    const roles = store.getters && store.getters.roles
-    const permissionRoles = value
-
-    const hasPermission = roles.some(role => {
-      return permissionRoles.includes(role)
-    })
-    return hasPermission
+export default function checkAuth(value, checkAll) {
+  if (typeof checkAll === 'undefined') {
+    checkAll = false
+  }
+  const hasAuthorization = store.getters.hasAuthorization
+  if (typeof value === 'string') {
+    return hasAuthorization(value)
+  } else if (value && value instanceof Array && value.length > 0) {
+    if (checkAll) {
+      return value.every(auth => {
+        return hasAuthorization(auth)
+      })
+    } else {
+      return value.some(auth => {
+        return hasAuthorization(auth)
+      })
+    }
   } else {
-    console.error(`need roles! Like v-permission="['admin','editor']"`)
+    console.error(`need auths! Like v-auths="['admin','editor']"`)
     return false
   }
 }

src/utils/request.js

@@ -19,6 +19,7 @@ service.interceptors.request.use(
       // let each request carry token
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
+      // config.headers['Authorization'] = 'Bearer ' + getToken()
       config.headers['X-Token'] = getToken()
     }
     return config
@@ -73,11 +74,22 @@ service.interceptors.response.use(
   },
   error => {
     console.log('err' + error) // for debug
-    Message({
-      message: error.message,
-      type: 'error',
-      duration: 5 * 1000
-    })
+    if (error && error.response && error.response.status === 401) {
+      Message({
+        message: error.response.data.message,
+        type: 'error',
+        duration: 5 * 1000
+      })
+      store.dispatch('user/resetToken').then(() => {
+        location.reload()
+      })
+    } else {
+      Message({
+        message: error.message,
+        type: 'error',
+        duration: 5 * 1000
+      })
+    }
     return Promise.reject(error)
   }
 )