Background management system - authority management

1. To achieve authority management, the menu must be dynamically generated

The backend returns me the path of the current login account, like ["/home","/produce","/abc"] , and then I will separate the routing into two processes, one is asyncRoutes are all asynchronous routing objects, and then put

 Login page, redirection page, which can be accessed without permission, put it under constantRoutes

 

 

 Get the permission path of the role when logging in, save it in the browser storage, and match the corresponding routing object

 These two pictures are my algorithm and processing method

 router.addRoutes is canceled in vue-router, and here I am in version 3. There are pitfalls here. router.addRoutes() stores an array of routing objects, and router.addRoute needs to be traversed again and again Add a routing object, here you need to pay attention

2. Refresh menu disappears

It is necessary to do browser caching for the saved routing objects, because vuex does not do persistent storage for processing, so the browser refreshes, and naturally the data in vuex returns to initialization. My processing method is

 The menu bar can be displayed normally

3. The refresh menu bar exists, but the jump does not work

The reason is that when you refresh, vue-router is also initialized. After refreshing, there are only those synchronous routes that you just instantiated, and the dynamic routes added by login are gone, so you need to send another request when you refresh, and follow the The same as logging in, my operation here is to do processing in vue.index, get the path Path of the role again, and do a dynamic addition

\

Now the dynamic routing is done

 4. Pay attention to small details

4.1——Judging the token, only after logging in can it be released, and no token can enter the login

4.2 Go to the route without permission, match the not-found component, the blank is not good-looking

4.3 To log out, you need to clear the data in vuex and browser storage.

Here I used 

 I use window.location.reload() here, and the browser is reloaded, which will cause a white screen for a while

 

 

Guess you like

Origin blog.csdn.net/ZHUzhuzhu08/article/details/126536725