3. permission的处理
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'//这里
import {
deepFn,
loopCheck,
loopRoles
} from '@/utils'
import {
constantRoutes,
asyncRoutes
} from "@/router";
NProgress.configure({
showSpinner:false})// NProgress Configurationconst whiteList =['/login']// no redirect whitelist// if (process.env.NODE_ENV !== 'development') {
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 inconst hasToken =getToken()if(hasToken){if(to.path ==='/login'){// if is logged in, redirect to the home pagenext({
path:'/'})
NProgress.done()}else{const hasGetUserInfo = store.getters.name
if(hasGetUserInfo){next()}else{try{// get user info
await store.dispatch('user/getInfo')// 获取个人信息路由列表// 做过处理得到权限路由数组const permList = store.getters.permList;// console.log(permList,'permList');// 配置路由权限的对象
let asyncRoutesRoutes = asyncRoutes;// 取出路由对象/*
{公文管理: Array(4), 发文管理: Array(1), 收文管理: Array(1), 呈批呈阅: Array(1), 会议管理: Array(1), …}
*/
let rr =loopRoles(asyncRoutesRoutes);
console.log(rr,"1111");// 匹配的路由和后台返回路由匹配形成数组
let mm =loopCheck(asyncRoutesRoutes, permList, rr);
console.log(mm,"2222");// 可以拿到初始化时配置的路由规则
router.options.routes = constantRoutes.concat(mm);
await store.dispatch('user/setRouters', constantRoutes.concat(mm))next()}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 directlynext()}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()})
4. utils/index.js
// lodash插件
import _ from 'lodash'// 两者都是深拷贝获取键值对
export functionloopRoles(data){
let listRoles ={};for(let index =0; index < data.length; index++){
let item = data[index];
let roles = _.get(item,'meta.roles');
let title = _.get(item,'meta.title');
let r =[];if(roles && title){
listRoles[title]= roles;}if(item.children && item.children.length >0){
let _m =loopRoles(item.children);for(let i in _m){
listRoles[title]= _.concat(listRoles[title],_m[i]);}
listRoles ={...listRoles,..._m }};// console.log('deepFn', item.meta.title);}return listRoles;}
export functionloopCheck(data,routers,rr){
let menu =[];for(let index =0; index < data.length; index++){
let item = data[index];// console.log('deepFn', item.meta.title);
let roles = _.get(item,'meta.roles');
let title = _.get(item,'meta.title');
let rl = title in rr ? rr[title]:[];
let ie = _.cloneDeep(item);
ie.children =[];if(roles){// console.log('deepFn', item.meta);
let iarr = _.intersection(roles,routers);if(iarr.length >0){
menu.push(ie);}else{
let iarr = _.intersection(rl,routers);// console.log(title, rl, iarr);if(iarr.length >0){
menu.push(ie);}}}else{
menu.push(ie);}if(item.children && item.children.length >0){
let _m =loopCheck(item.children,routers,rr);if(_m.length >0){
ie.children = _.concat(ie.children,_m);}};if(ie.children.length ==0){
delete ie.children;}}return menu;}