- 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
})
- 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
})
- store>modules>user.js
/**
* @description: 设置用户拥有权限的路由配置列表
*/
SET_ASYNC_ROUTES: (state, routesInfo) => {
state.asyncRoutes = routesInfo;
},
/**
* @description: 设置用户拥有权限的路由名称
*/
SET_ASYNC_ROUTES_NAME: (state, routesInfo) => {
state.asyncRoutesName = routesInfo;
},
