Global, exclusive and local routing guard

One 、 Create route

// Create a router , And exposed 
export default new VueRouter({
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        },

    ]
})

Two 、 Global route guard

        Global guards are set in router above , This can be router/index.js Found inside . You can set up a global guard here , Of course, you can also set up global guards in other places , such as main.js perhaps App.vue. It depends on the specific needs .

Route guard ： Protect the security of routing .（ jurisdiction ）

（1） Global front route guard

Before each route switching / When initializing - Called

Front guard of the whole situation beforeEach The callback function of the global guard accepts three parameters as ：to,from,next

Three parameter descriptions ：

• to Jump into the target routing object
•  from The object is ready to leave the current route
•  next After calling this method , Go to the next hook function , Function like express perhaps koa Called in the middleware next

 next Function description ：

• If next Function normal call next() Indicates normal entry into the jump route , The navigation status is confirmed
•   If next When the function is called, it is passed in false, Such as ：next(false), Indicates terminal navigation jump
•  next Functions can also pass parameters , Indicates a jump to an instruction route next("/"), or next({ path:"/" }) Parameter routing

router.beforeEach((to, from, next) => {
    console.log(' Front routing guard ', to, from);

    if (to.meta.isAuth) { // Whether authentication is needed 
        if (localStorage.getItem('school') === 'atguigu') {
            next() // release 
        } else {
            alert(' The school name is wrong , No authority ！')
        }
    } else {
        next()
    }
});

（2） Global post route guard

afterEach Global route guard

afterEach The callback function of the global guard accepts two parameters: to,from

Description of two parameters ：

• to Jump into the target routing object
• from The object is ready to leave the current route

afterEach No, next() Callback function , Because in afterEach When called , The route has been skipped .

router.afterEach((to, from) => {
    console.log(' Post routing guard ', to, from);
    document.title = to.meta.title || ' Silicon Valley system '
});

3、 ... and 、 Exclusive routing guard

      The hook function used is consistent with the global routing guard , by beforeEnter, The difference is , The route exclusive guard is defined in the route record , The global routing guard is defined in the entry file , The route exclusive guard is only valid when the route enters , The global route guard is that all route jumps will be blocked .

      It refers to the hook function that can also be set when configuring a single route .

 // Are you authorized to 
 meta: { isAuth: true, title: ' Journalism ' },
 // Exclusive routing guard 
 beforeEnter: (to, from, next) => {
    // ...
    console.log(' Exclusive routing guard ', to, from);
    if (to.meta.isAuth) { // Whether authentication is needed 
    if (localStorage.getItem('school') === 'atguigu') {
         next() // release 
    } else {
         alert(' The school name is wrong , No authority ！')
         }
    } else {
         next()
    }
}

Four 、 Intra group routing guard

1.  Guards within a component are defined inside the component , Routing guard in component options object

2.  There are three routing guards inside the component , by ：beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave.

3.  beforeRouteEnter Top note before component creation , Component instances cannot be used this

4.  beforeRouteUpdate Route changed , But when a component is reused , such as ： Dynamic routing

5.  beforeRouteLeave Called by this component when the navigation leaves  

export default {
    name:'About',
    // Through routing rules , Entering the component is called 
    beforeRouteEnter (to, from, next) {
        console.log('About-beforeRouteEnter', to, from);
        if (to.meta.isAuth) { // Whether authentication is needed 
            if (localStorage.getItem('school') === 'atguigu') {
                next() // release 
            } else {
                alert(' The school name is wrong , No authority ！')
            }
        } else {
            next()
        }
    },
    // Through routing rules , Called when leaving the component 
    beforeRouteLeave (to, from, next) {
        console.log('About-beforeRouteLeave', to, from);
        next()
    }
}