first of all, all your backend APIs need permission judgment, because no matter how the frontend makes permission judgment, it is not safe, because the frontend only judges whether certain div pages are displayed or not according to the permissions returned by the backend, and some random changes that understand the code can break your permission control.
background work

1. all backend APIs need to judge permissions based on user roles

Front-end work

1. Save frontend permissions
2. write a global route jump function as a hook, and each page jump needs to go through this function
3. in order to prevent the user from entering url, in the address bar, you need to add a piece of js code to determine the permission after the head tag of each HTML page that requires permission. If you do not have the permission, you will drop back the page
.

rough method
write a global function routeCheck to determine the route. All page jumps are changed to click events, calling routeCheck

function routeCheck(url){
    if(url){
        location.href = url;
    }
}

of course, as the front end, this method is to judge the permissions before the jump. In order to be more secure and prevent users from entering url through the browser address bar to achieve the jump,
you also need to add a piece of permission-checking js code to the pages that need permission control. Put it after head, before body, that is, before dom rendering.

page can be accessed. Whether you can see the data is permission control

probably know, and the answer adopted is that approximate control can be achieved. But dom rendering is the browser's business, the browser-to-user process, before which the entire source code of html has been sent to the browser, which is the server-to-browser process. I can grab the packet through the server-to-browser transfer process, such as making a request with postman, and I can see the html source code. Therefore, only the separation of the front and rear of jquery can not achieve fine page permission control, because each page is isolated. Alas, you still have to use vue