vue路由+权限

1. router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import loginLayout from '../views/layout/loginLayout'
import Layout from '../views/layout/layout'
/**
* @description: 路由表配置
* @hidden {*} 是否在菜单隐藏路由 true 隐藏
* @noAuth {*} //不需要控制权限的添加 路由表添加noAuth:true字段
*/
export const routes = [
 {
   path: '/',
   redirect: '/login',
   hidden: true
 },
 {
   path: '/login',
   name: 'Login',
   component: () => import('@/views/login/login'),
   hidden: true
 },
 {
   path: '/home',
   name: 'Home',
   component: () => import('@/views/home/home'),
   hidden: true,
   meta: { title: '首页', icon: '' }
 },
 {
   path: '/errPage',
   name: 'ErrPage',
   component: () => import('@/views/404'),
   hidden: true
 },
]
export const asyncRoutesMap=[
 {
   path: '/dashboard',
   name: 'Dashboard',
   component: Layout,
   // redirect:{name:'Work'},
   meta: { title: '工作台', icon: 'el-icon-s-management' },
   hidden: false,
   children: [
     {
       path: 'work',
       name: 'Work',
       component: () => import('@/views/work'),
       redirect: { name:'WorkList'},
       meta: { title: '业务', icon: 'el-icon-s-order' },
       hidden: false,
       children: [
         {
           path: 'workList',
           name: 'WorkList',
           component: () => import('@/views/work/list'),
           meta: { title: '', noAuth:true },
           hidden: true,
         },
         {
           path: 'detail',
           name: 'Detail',
           component: () => import('@/views/work/detail'),
           meta: { title: '业务详情', noAuth: true},
           hidden: true,
         },
       ]
     },
   ]
 },
 {
   path: '/hoy',
   name: 'Hoy',
   component: Layout,
   //redirect:{name:'MyHoy'},
   meta: { title: 'Hoy', icon: 'el-icon-s-flag' },
   hidden: false,
   children: [
     {
       path: 'myHoy',
       name: 'MyHoy',
       component: () => import('@/views/myHoy'),
       meta: { title: '我的Hoy', icon: 'el-icon-s-custom' },
       hidden: false,
     },
   ]
 },
 {
   path: '*',
   redirect: '/errPage',
   hidden: true
 }
]
export default new VueRouter({
 mode: 'history',
 scrollBehavior: () => ({ y: 0 }),
 routes
})

2. permission.js

/**
 * @Author: DDY
 * @Date: 2021-09-04 20:42:08
 * @description: 权限路由守卫
 */
import router from './router/index';
import { asyncRoutesMap } from './router/index';
import store from './store'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
import { Message } from 'element-ui'

const whiteList = ['/login','/404'] // 不重定向白名单
router.beforeEach((to, from, next) => {
    NProgress.start()
    if (whiteList.indexOf(to.path) !== -1) {
        next()
    } else {
        const token = store.getters['token'];
        if (token){
            let asyncRouets = store.state.User.asyncRoutes;
            if (asyncRouets.length){
                //处理过有权限的路由信息
                next()
            }else{
                store.dispatch('User/getUserInfo').then(res => {
                    let permissions_url = store.state.User.asyncRoutesName
                    //根据权限name处理路由表
                    const addRoutes = filterAsyncRouter(permissions_url, asyncRoutesMap)
                    store.commit('User/SET_ASYNC_ROUTES', addRoutes)
                    router.addRoutes(addRoutes) // 动态添加可访问路由表
                    if (res.length){
                        next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
                    }else{
                        Message({
                            duration:5000,
                            type:'error',
                            message: '您没有查看页面的权限!'
                        })
                        next('/')
                    }
                }).catch((err) => {
                    store.dispatch('User/logOut').then(() => {
                        Message.error(err || 'Verification failed, please login again')
                        next('/')
                    })
                })
            }
        }else{
            next('/')
        }

    }
})

function resolveRoute() {
    //跳转对应的地址
    let env = process.env.NODE_ENV;
    let hostName = location.hostname;
    NProgress.done()
}

/**
 * 通过meta.url判断是否与当前用户权限匹配
 * @param {*} permissions_url  接口返回的权限 [{name:'xxx'}]
 * @param {*} route  某条路由信息
 */
export const hasPermission=function(permissions_url, route) {
    if (route.name) {
        return permissions_url.some(item => {
            return route.name == item.name
        })
    } else {
        return true
    }
}
/**
 * @description: 用户所拥有的权限AsyncRouter 路由表
 * @param {*} permissions_url  接口返回的权限 [{name:'xxx'}]
 * @param {*} asyncRouterMap  路由表所有的异步路由 []
 * @return {*}  用户所拥有的权限AsyncRouter 路由表
 */
export const filterAsyncRouter = function (permissions_url, asyncRouterMap) {
    const accessedRouters = asyncRouterMap.filter(route => { //返回符合条件的路由
        if (route.meta && route.meta.noAuth) {  //不需要控制权限的添加 路由表添加noAuth:true字段
            return true;
        }
        if (hasPermission(permissions_url, route)) { //符合条件的
            if (route.children && route.children.length) {
                route.children=filterAsyncRouter(permissions_url, route.children);
            }
            return true;
        }
        return false;
    });
    return accessedRouters
}

router.afterEach(() => {
    NProgress.done() // 结束Progress
})

3. store>modules>user.js

    /**
     * @description: 设置用户拥有权限的路由配置列表
     */
    SET_ASYNC_ROUTES: (state, routesInfo) => {
        state.asyncRoutes =  routesInfo;
    },
    /**
     * @description: 设置用户拥有权限的路由名称
     */    
    SET_ASYNC_ROUTES_NAME: (state, routesInfo) => {
        state.asyncRoutesName =  routesInfo;
    },