vue项目权限管理

　　首先，权限管理 般需求是两个： 权限和按钮权限。 权限管理 般需求是 权限和按钮权限的管理  具体实现的时候分后端和前端两种 案：
　　前端 案会把所有路由信息在前端配置，通过路由守卫要求 户登录， 户登录后根据 过滤出路由表。 如我会配置 个 asyncRoutes 数组，需要认证的 在其路由的 meta 中添加 个 roles 字段，等获取 户 之后取两者的交集，若结果不为空则说明可以访问。此过滤过程结束，剩下的路由就是该 户能访问的 ，最后通过 router.addRoutes(accessRoutes)  式动态添加路由即可。
　　后端 案会把所有 路由信息存在数据库中， 户登录的时候根据其 查询得到其能访问的所有 路由信息返回给前端，前端再通过 addRoutes 动态添加路由信息。
　　按钮权限的控制通常会实现 个指令，例如 v-permission ，将按钮要求 通过值传给v-permission指令，在指令的 moutned 钩 中可以判断当前 户 和按钮是否存在交集，有则保留按钮， 则移除按钮。 纯前端 案的优点是实现简单，不需要额外权限管理 ，但是维护起来问题 较 ，有新的 和 需求 就要修改前端代码重新打包部署；服务端 案就不存在这个问题，通过专 的 和权限管理 ，配置  和按钮权限信息到数据库，应 每次登陆时获取的都是最新的路由信息，可谓 劳永逸！
　　路由守卫  permission.js ：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＂, ＂/auth-redirect＂] // 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() // 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) {         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＂)            // 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() }) 复制代码
　　路由 成##  permission.js ：import { asyncRoutes, constantRoutes } from ＂@/router＂  /**  * Use meta.role to determine if the current user has permission  * @param roles  * @param route  */ function hasPermission(roles, route) {   if (route.meta && route.meta.roles) {     return roles.some(role => route.meta.roles.includes(role))   } else {     return true   } }  /**  * Filter asynchronous routing tables by recursion  * @param routes asyncRoutes  * @param roles  */ export function filterAsyncRoutes(routes, roles) {   const res = []    routes.forEach(route => {     const tmp = { ...route }     if (hasPermission(roles, tmp)) {       if (tmp.children) {         tmp.children = filterAsyncRoutes(tmp.children, roles)       }       res.push(tmp)     }   })    return res }  const state = {   routes: [],   addRoutes: [] }  const mutations = {   SET_ROUTES: (state, routes) => {     state.addRoutes = routes     state.routes = constantRoutes.concat(routes)   } }  const actions = {   generateRoutes({ commit }, roles) {     return new Promise(resolve => {       let accessedRoutes       if (roles.includes(＂admin＂)) {         accessedRoutes = asyncRoutes || []       } else {         accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)       }       commit(＂SET_ROUTES＂, accessedRoutes)       resolve(accessedRoutes)     })   } }  export default {   namespaced: true,   state,   mutations,   actions } 复制代码
　　动态追加路由##  permission.js ：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＂, ＂/auth-redirect＂] // 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() // 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) {         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＂)            // 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() }) 复制代码
　　服务端返回的路由信息如何添加到路由器中？ // 前端组件名和组件映射表 const map = {   // xx: require(＂@/views/xx.vue＂).default // 同步的 式   xx: () => import(＂@/views/xx.vue＂) // 异步的 式  }  // 服务端返回的 asyncRoutes  const asyncRoutes = [   { path: ＂/xx＂, component: ＂xx＂, ... }  ]   // 遍历asyncRoutes，将component替换为map[component] function mapComponent(asyncRoutes) {   asyncRoutes.forEach(route => {     route.component = map[route.component];     if(route.children) {       route.children.map(child => mapComponent(child))     }   })  }  mapComponent(asyncRoutes)