Vue uses token to jump to the login page after it expires

The routing hook in Vue2.0 is mainly used to intercept navigation and let it complete the jump or cancel before it can be understood as a routing guard. This article mainly brings you an example of Vue using the routing hook token to jump to the login page after the token expires. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

It is divided into global navigation hooks, hooks exclusive to a single route, and intra-component hooks.

The three types of hooks are just used in different places. They all accept a function as a parameter. The function passes in three parameters, namely to, from, and next.

Next has three methods

(1)next(); //Default route

(2)next(false); //Prevent route jump

(3)next({path:'/'}); //Block the default route and jump to the specified path

Here I used a hook within the component to determine when the token expires and jump to Login page, the other two hooks can be viewed on the official website.

//路由前验证
  beforeRouteEnter(to, from, next) {
   let postdata = {
    meta: {
     client_version: "1.0",
     client_type: "1",
    },
    data: {
     access_token: $.cookie("authtoken").toString()
    }
   }

   $.ajax({
    url: urls.serchuser,
    type: 'POST',
    data: JSON.stringify(postdata)
   }).done(data => {
    data = JSON.parse(data);
    console.log(data);
    if(data.status == 10050) {
     next(false);
     location.href = 'login.html';
    }else{
     next();
    }
   })
  }

The implementation method is very simple. Send a request to the server before routing. If the returned data indicates that the token has expired, the default jump will be prevented, otherwise it will jump normally.

Related recommendations:

Vue-resource interceptor determines token failure and jumps

PHP WeChat public account verification token and reply content , method of pushing messages

Detailed example of jQuery Ajax using Token to verify identity

The above is the detailed content of Vue uses token to jump to the login page after it expires. For more information, please follow other related articles on the PHP Chinese website!