The main three files
A,/SRC/router/index. Js this is direct configuration directory file
Export const constantRoutes=[
{
Path: '/login',
Component: ()=& gt; Import (' @/views/login/index),
Hidden: true
},
{
Path: '/404',
Component: ()=& gt; Import (' @/views/404),
Hidden: true
},
{
Path: '/',
Component: Layout,
Redirect: '/dashboard,
Children: [{
Path: 'dashboard',
Name: 'front page',
Component: ()=& gt; Import (' @/views/dashboard/index),
Meta: {title: 'front page', icon: 'dashboard', affix: true}
}]
}
]
Export const asyncRoutesMap=[
{
Path: '/nested,
Component: Layout,
Redirect: '/nested/menu1',
AlwaysShow: true,
Name: 'data maintenance,
Meta: {
Title: 'data maintenance,
Icon: 'nested'
},
Children:
{
Path: 'material',
Component: ()=& gt; Import (' @/views/nested/material/materiallist/index '),//Parent router - view
Name: 'material master gears'
Meta: {title: 'material master files, icon:' form, roles: [' admin ']},
},
{
Path: 'menu2,
Component: ()=& gt; Import (' @/views/nested/menu2/index '),
Name: 'the customer master file,
Meta: {title: 'the customer master file, icon:' table 'roles: [' admin']},
NoCache: true,
Children:
{
Path: 'menu2-1',
Component: ()=& gt; Import (' @/views/nested/menu2/menu2-1 '),
Name: 'add customers'
Meta: {title: 'add customers' icon:' table 'roles: [' admin']}
},
{
Path: 'menu2-2',
Component: ()=& gt; Import (' @/views/nested/menu2/menu2-1 '),
Name: 'client list,
Meta: {title: 'client list, icon:' table '}
}
]
}
]
]
Two,/SRC/permission/permisson. Js mainly to configuration directory
The import {asyncRoutesMap, constantRoutes} from '@/router'
/* *
* by meta role to judge whether the current user permissions matching
* @ param {*} roles
* @ param {*} the route
*/
The function hasPermission (roles, the route) {
If (route. The meta & amp; & The route. The meta. Roles) {
Return roles. Some (role=& gt; The route. The meta. Roles. Includes (role))
} else {
Return true
}
}
The export function filterAsyncRoutes (routes, roles) {
Const res=[]
Routes. The forEach (route=& gt; {
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)=& gt; {
State. AddRoutes=routes
State. The routes=constantRoutes. Concat (routes)
}
}
Const actions={
GenerateRoutes ({commit}, roles) {
The return of new Promise (resolve=& gt; {
Let accessedRoutes
If (roles. Includes (" admin ")) {
AccessedRoutes=asyncRoutesMap | | []
} else {
AccessedRoutes=filterAsyncRoutes (asyncRoutesMap, roles)
}
Commit (' SET_ROUTES accessedRoutes)
Resolve (accessedRoutes)
})
}
}
Export the default {
Namespaced: true,
The state,
Mutations,
The actions
}
Three/SRC/permission. Js the routing to jump when walking logic
Import the router from '/router'
The import store from '/store'
The import {Message} from 'element - the UI'
Import NProgress from 'NProgress//progress bar
The import 'nprogress/nprogress. CSS//progress bar style
The import {getToken} from '@/utils/auth//get token from cookies
Import getPageTitle from '@/utils/get - page - the title'
NProgress. Configure ({showSpinner: false})//NProgress Configuration
Const whiteList=['/login ']//no redirect whiteList
The router. BeforeEach (async (the to, from, next)=& gt; {
//start the progress bar
NProgress. Start ()
//set the page title
Document. The title=getPageTitle (to) meta) title)
//determine been the user has logged in
Const hasToken=getToken ()
If (hasToken) {
If (to. The path==='/login') {
//if is logged in, redirect to the home page
Next ({path: '/'})
NProgress. Done ()
} else {
Const hasGetUserInfo=store. Getters. Name
If (hasGetUserInfo) {
Next ()
ResetRoute ()//I am not sure
} else {
Try {
//get the user info
Await store. Dispatch (' user/getInfo)
Next ()
{} the catch (error)
//remove token and go to the login page to re - login
Await store. Dispatch (' user/resetToken ')
Message. The error (error | | 'from the error')
Next (`/login? Redirect=${to. The path} `)
NProgress. Done ()
}
}
}
} else {
/* has no token */
If (whiteList. IndexOf (to. The 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. The path} `)
nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull