Web front end----[Vue] vue routing guard (global front routing guard, global post routing guard, local routing path guard, local routing component guard)

Table of contents

Preface

This article introduces the last knowledge point of Vue2, about Vue’s routing guard. That is to say, authentication. Not all components can be accessed by anyone and require permissions. Displaying routing components based on permissions requires routing guards.

(This article is based on the code of the previous article )

Global front route guard

The global front routing guard is written between the created router and the exposed router.

router.beforeEach(callback)

The callback function can be an ordinary function or an arrow function.

The callback function has three parameters

from : routing object, indicating where it comes from, starting point

to : routing object, indicating where to go and the end point

next : This is a function. After calling it, it means release and you can continue to go down.

router.beforeEach((to,from,next)=>{})

This callback function will be called once during initialization , and will be called every time before switching routing components.

Simple example
router.beforeEach((to,from,next)=>{
    let user = 'zzz'
    if(to.meta.isAuth) {
        if(user=='admin') {
            next()
        }
        else {
            alert('你没有权限')
        }
    }
    else {
        next()
    }
})
Because the routing object needs to be frequently judged whether authentication is required.

Therefore, code redundancy can be solved by adding custom attributes to the routing object.

Adding custom attributes to the routing object needs to be defined in the meta of the routing object.

Through the above code, you can simply achieve the authentication function, judge the user name and decide whether to release the display routing component.

Global post route guard

The global post route guard is the same as the global pre route guard, both are written between creating the router and exposing the router.

router.afterEach((to,from)=>{})

The two parameters, to and from, are the same as the global front guard.

The difference is that

The global front route guard will call the callback once during initialization and the callback function will be called once before switching the routing component.

The global post-routing guard will call callback once during initialization and once after switching routing components.
// 全局后置守卫
router.afterEach((to,from)=>{
    console.log(to);
    console.log(from);
})

Path guard of local route guard

Local route guard, authenticating individual components

The code is written in the route routing object

beforeEnter(){}

No callback function

It can be understood as a function

three parameters

to,from,next

 beforeEnter(to,from,next){
                        let user = 'admin'
                        if(user=='admin') {
                            next()
                        }
                        else {
                            alert('你没有权限')
                        }
                    }

Partial routing guard component guard

The component guard is for routing components and will only take effect on routing components.

The code is written in the routing component

Execute before entering the routing component:

beforeRouteEnter(to,from,next){}

Execute before leaving the routing component:

beforeRouteLeave(to,from,next){}
 beforeRouteEnter(to,from,next){
      console.log(to);
      next()
    },
    beforeRouteLeave(to,from,next){
      console.log(from);
      next()
    }
Execute on a timeline

to in beforeRouteEnter and from in beforeRouteLeave point to an object