In order to achieve the goal that different accounts can see different pages and perform different functions after logging in the system, we have a variety of solutions.RBACRole-based Access Control (ROLE-based Access Control) permission model, also known as role-based permission assignment solution.

Its permission mode is as follows:

RBAC has three key points

2. Permission point: How many functions does the system have (for example, the system has three pages, and each page has a different operation) 3. Role: Different permission points are assigned to different rolesCopy the code

As shown below:

Generally speaking, we assign different permissions to different roles, and then we assign different roles to different users to achieve different users with different permissions

The BUG

1. Bug repair when refreshing the page

(1) If we refresh the browser, we will find that we have jumped to 404 page

(2) A blank screen is displayed when the route added by addRoute is refreshed

The solution

Change page 404 to the end of the routing configuration

After you get all the routes

filterRoutes.push( // 404 page must be placed at the end !!!
    { path: '*', redirect: '/404', hidden: true })
router.addRoutes(filterRoutes)
Copy the code

2. Solve the blank screen bug caused by refreshing

if (! Store.getters. UserId) {// omit other... Next ({... to, // next({ ... } else {next()} replace: true // reenter the page})} else {next()}Copy the code

3. Log in again and find that the menu is abnormal

why

Router. AddRoutes (filterRoutes) is used to dynamically add routing Settings.

You need to reset the route permission (restore the default) and add it again after logging in. Otherwise, it will be added repeatedly

Solution: Execute the given function when deleting tokens and removing personal information with the given scheme

Export function resetRouter() {const newRouter = createRouter() router.matcher = newrouter.matcher // Reset the matching path of the route}..................... // Exit action logout(context) {// 1. Context.com MIT ('removeUserInfo') // 2. Context.com MIT ('removeToken') // 3. Reset route resetRouter()Copy the code