VUE page permission control and instance code for login verification

Page permission control

What does the page permission control mean?

A site has different roles, such as administrators and ordinary users, requiring different roles to access the page that can be accessed. If a page, there is a role point access, and it will be limited.

VUE Dynamic Add Routing and Generating Menu This is an article I have written,

Dynamically add routing and menus to control, the page that cannot be accessed does not add to the routing table, This is one of the methods.

Another way is that all pages are in the routing table, just to judge the role permissions when access. If there is permission, let the access, no permissions refuse, jump to the 404 page.

In each route META attribute, the role of the route will be accessed to the ROLES. After each login, the user returns the role of the user. Then, when the page is accessed, the route META property and the user’s role are then compared. If the user’s role is in the ROLES of the route, it is accessible if it is not accessed.

Routing information

Routes: [{path: ‘/ login “, Name : ‘login’, Meta: {Roles: [‘Admin’, ‘User’]}, Component: () => Import (‘../ components / login.vue’)}}}}}}}}}} {pat: ‘Home’, Name : ‘Home’, Meta: {Roles: [‘Admin’]}, Component: () => Import (‘../ views / home.vue’)},]

// Assume that the role has two: admin and user // here is from the background The acquired user role const all = ‘user’ // will trigger the router.beforeeach event Router.beFOREEACH ((to, from, next) => {if (to, from, next) => {if (meta.roles.includes (roule)) {NEXT ()} else {next ({path: ‘/ 404}})

Landing verification
   The website generally only log in once, the other pages of the website can be directly accessed, no need to log in again. 
We can implement it with token or cookie, with code to show how to log in with Token.

Router.beforeeeach ((to, from, next) => {// If there is TOKEN, the user has logged in if (LocalStorage.Getitem (‘token’)) {// Access the login page in the case where the login will be redirected to the home page if (to.Path === ‘/ login’) {next ({path: ‘/’})} else {next ({path: to .path || ‘/’}}}} else {// No login, no page is redirected to the login page if (to.Path === ‘/ login’) {next ()} else {next (` / Login? redirect = $ {to.Path} `)}}} All of the above implementations can be in my Vue Lightweight Background Management System Foundation Template Project Find


The above is the instance code for the VUE page permission control and login verification function, I hope to help everyone. If you have any questions, please leave a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website! If you think this article helps you, welcome to reprint, please indicate the source, thank you!
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment