How to handle authentication at the front end, project optimization [must pass the interview]

How does the front end handle authentication?

Generally speaking, we mainly control the RBAC authentication mode

Whether the page authentication user has the right to access the page, or whether he has the right to view the route leading to the page. (components and routes)

Components: 1. When you have permission to access the page: through the routing guard combined with the token returned from the backend, perform authentication before the page jumps, check whether the token expires and whether you have the permission of the page.

Routing: Determine whether the user has permission to view the route (or menu or navigation) through the specified page: 1. Pure front-end processing: When writing the routing table, we will add a meta under each route, and then write in the meta You can access or view the role information of the route or page, and then we can use addrouter to control the display and concealment of the route through the information under the meta. The routing table is saved in vuex, and the routing and navigation under the token are dynamically rendered through addrouter

UI authentication: Its granularity is very fine, so it is more difficult, and we can configure it through unified custom instructions.

Generally speaking, UI authentication refers to button authentication. The simple method of UI authentication is that we can obtain the role information under the token, and use v-if to process the display and concealment of the UI, but this method has obvious disadvantages and is not easy. Unified management, so we need to centrally encapsulate a custom instruction. In the custom instruction, the logic of authentication is processed centrally, and then distributed on each authentication button.

Front-end project optimization

Mainly divided into: performance optimization and code optimization

1. v-for set the correct key value (optimize the comparison speed of the diff algorithm) key value try to set the id, key value name

2. Package reuse module (http request), component (ui library)

3. Routing lazy loading: reduce the loading time of the first screen

4. Use keep-alive to cache inactive components

5. Use image sprites or images to load images, cpn three ways to optimize

6. When packaging, plug-ins try to use cdn to import to reduce project size

7. Optimized with cut-off anti-shake when searching for pull-down trigger events

8. Variable names, function names, and module names are defined semantically

9. Variable names, function names, module names, and component names are officially named according to vue

10. Code comments when writing code, especially comment field information when encapsulating interfaces