To undertake the above, the following work content
Create permission.js
The following figure shows the script file directory
Note:
NPM install –save nprogress NProggress is the referenced progress bar plug-in
2. Briefly describe the technical application in this example
(1).router. BeforeEach (to, from, next) :
Global front guard
**to:** Route to be accessed
**from:** Current outbound route
** Next :** The following three uses are used in this example
Next (): Indicates whether to permit the peer to be accessed
Next (‘/’) or next({path: ‘/’}): jumps to a different address. The current navigation is interrupted and a new navigation is performed.
Next (false): interrupts current navigation
(2).router.addRoutes(parm):
Dynamic route matching. Parm is the parameter. In actual development, it must be an array that meets the requirements of routes option. When the user logs in, according to the background to return the current route array, through ** router.addroutes (parm), ** to give the user different current access rights. For details about the application scenarios, see Using addRoutes
(3).next({ … to ,replace: true}):
BeforeEach ((to, from, next) until next({… beforeEach(to, from, next) until next({… To}) until the corresponding route is found. Replace: true is just a setting message that tells VUE that after this operation, it cannot use the browser back button to return to the previous route
Function: Prevents AddRoutes from accessing routes immediately before the execution is complete. If the added route cannot be found, a blank screen is displayed
(4). Async, await, promise
** Function :** here you can understand it as a solution to asynchronous operation, in which Promise is the core application of AXIos, and also a required interview question for Internet companies. For details, please visit the detailed description.
(5). Store. Dispatch and store. Getters
The application of VUex will be explained separately in the next article. The purpose of obtaining user roles and permissions is generally understood here
Build the global front guard
The official name of the route guard is navigation guard, which has a lot of classification, each has its own use. For details, you can click the link to view the official website. The following is the global front guard.
1. Code logic analysis:
// Route whitelist Settings
const whiteList = [‘/login’, ‘/Index’]
router.beforeEach(async (to, from, next) => {
// Load the progress bar
NProgress.start()
// Get the route’s custom title as the page title, which was mentioned in the previous tutorial
document.title = getPageTitle(to.meta.title)
As shown in the figure below
// Obtain the token. The application of this method was mentioned in the previous tutorial
const hasToken = getToken()
// If the token has a value, the user has logged in
if (hasToken) {
// Route to continue access for the login page
if (to.path === ‘/login’) {
next({
path: ‘/’
})
Nprogress.done () // Stops the progress bar
} else {
// Determine whether the user has obtained its permission role through getInfo
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
// The user role has been obtained and the access is allowed to continue
next()
} else {
// The user role is not obtained
try {
// Get the user role
const {
roles
} = await store.dispatch(‘user/getInfo’)
// Obtain the routes owned by the role based on the role (that is, the function tree on the left of the common background management interface)
// Get the permissions of the user
const accessRoutes = await store.dispatch(‘permission/generateRoutes’, roles)
// Dynamic route matching grants the user the permission obtained through the background interface
router.addRoutes(accessRoutes)
next({
. to,
replace: true
})
} catch (error) {
// Delete the token, an error message is displayed, and the login page is displayed
await store.dispatch(‘user/resetToken’)
Message.error(error || ‘Has Error’)
next(`/login? redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
// The user does not obtain the token, that is, there is no login
// Only whitelisted pages can be accessed
if (whiteList.indexOf(to.path) ! = = 1) {
next()
} else {
// Other pages that do not have access are redirected to the login page
next(`/login? redirect=${to.path}`)
NProgress.done()
}
}
})
Logically we have already implemented:
(1) When a user logs in, he/she can access the interface based on token authentication and dynamically obtain his/her accessible route permission through roles
(2). When not logged in: Only the customized whitelist route permission can be accessed
Do you feel that the user login permission verification has been finished
As a final step, we need to add a reference to the script in main.js
As shown in the figure below
Main.js is the program entry for this project, and for those who forget, check out the previous tutorial (introduction and configuration of main.js). Each component accesses main.js, which is then navigated by the ** global front navigation we just built into Permission.js, which is guarded and verifies route permissions. 支那
Enlightenment:
The way ahead is long; I see no ending, yet high and low I’ll search with my will unbending
A lot of applications in programming are combinations of knowledge points,
I will try my best to integrate and share trivial knowledge with beginners.
Note: The application of Vuex in this example will be explained in download and share.
** Read on for a vUE primer on VuEX five Attributes and Dynamic Configuration (6) **