Two ways of route interception for Vue authentication

vue Two methods of authentication in

There are two kinds of authentication ： One is route interception , One is dynamic routing .

Route blocking

adopt vue-router Of beforeEach Method to intercept every route access , Determine whether there are authentication requirements or authority verification in the intercepted information , In order to achieve Authentication .
If the permission is not enough , Although the access path exists, it will be blocked .

Dynamic routing

After logging in, according to the user information and permissions, dynamically add the correct authority routing , If the permission is not enough , There is no access path .

Compare

Routing interception is relatively simple to implement , Just save the user permission information when you log in , Then, when you write a route, you will add permission information to the route that needs authentication , And then in beforeEach In interception, judge whether processing can enter , also , Even if passed f5 Refresh the page ,
As long as the user information authority information is saved , Then authentication can be realized .

And dynamic routing , It's relatively difficult to implement , It may also require back-end cooperation , But it seems to be more advanced in terms of security , After all, even if you know that there is a certain permission to route , But I don't paint at all , You can never walk in . Dynamic routing requires logging user permissions after logging in
Menu list , This list may be given by the back end or summarized by the front end itself . If the front-end summarizes itself, it needs to generate different routing lists according to users with different permissions , Then after logging in, render on demand . Moreover, the conditions and implementation logic of this dynamic route loading judgment will be more complex
miscellaneous . You need to consider f5 After refresh, dynamic route reloads , Because you will not go through the login operation again at this time , So dynamic route loading will not be placed in the callback of login function , But it has to be rendered after landing , So we put it in the same way router Of beforeEach In this way , It's just
The judgment condition needs to be changed to that the user permission information already exists, but the dynamic route is loaded by rendering , For specific implementation, please see an example .

Example - Route blocking

// File directory
|--webapp
|----src
|------api
|------pages
|------routers
|--------modules
|--------index.js
|------utils
|------App.vue
|------main.js
|----package.json
|----vue.config.js

// webapp/src/routers/modules/user.js
// Routing can be differentiated by module , I've just refined , You can also put all routes in a folder , It's just that it might look a little bit more
const userRouter = [
{ path: '/user/router1', // In this way, loading on demand can be realized , Package and refine ,webpackChunkName It is the prefix of the file name generated by packaging
component: () => import(/* webpackChunkName: "router1" */ '@/pages/user/router1.vue'), meta: { // Put some custom information here ,permission It's access information , It will be later in beforeEach To judge , must amin To get into
// Sometimes we want to package all components under a certain route in the same asynchronous block (chunk) in . Just use name chunk, A special annotation syntax to provide chunk name ( need Webpack > 2.4).
// https://router.vuejs.org/zh/guide/advanced/lazy-loading.html title: 'router1', permission: 'admin' } },{
path: '/user/router2', component: () => import(/* webpackChunkName: "router2" */ '@/pages/user/router2.vue'), meta: { title: 'router2' } }
]
export default userRouter;
// webapp/src/router/index.js
// Here we summarize all the detailed module routes
import Vue from 'vue';
import Router from 'vue-router';
import userRouter from '@/routers/modules/user.js';
// vue Use vue-router This plugin
Vue.use(Router);
const router = new Router({
routes: [ { path: '/', redirect: '/home' }, ...userRouter, { path: '*', redirect: '/404' } ]
});
export default router;

// webapp/src/main.js
// commonly router Of beforeEach Will be in main.js in , Throughout vue Load on instantiation .
import Vue from 'vue';
import router from '@/routers/index.js';
// It can be done here vue-router Of beforeEach Intercepted , You can put it somewhere else , I prefer to put this
router.beforeEach((to, from, next) => {
document.title = to.meta.title || ''; // Here we get the user information first , I'm lazy with sessionStorage Save
// It contains user rights , User information, etc
const user = JSON.parse(sessionStorage.getItem('ms_user')); // You have to add to.path !== 'login' The judgment of the , Or you'll fall into an infinite loop ,
// Because logic comes in for the first time , Judge that the user information does not exist , namely !user by true, Because of the use of next('/login') Instead of next(),
// It will enter the route jump again ,next() The method has no parameters, it goes directly to the page , Will not enter the route intercept again , If there are parameters, it will , Because of the jump ,
// So go into the route again , Judge again , Enter the route again , Judge again , Cycle, infinite cycle
// So it must be added to.path !== 'login' The judgment of the
if (!user && to.path !== '/login') { next('/login'); } else if (to.meta.permission) { user.permission === to.meta.permission ? next() : message.alert(' No authority ');
} else { next(); }});
new Vue({
router, render: h => h(App)
}).$mount('#app');

If you want to communicate, you can send a private message or wx：zilian_taoyaoyao