Home > Web Front-end > JS Tutorial > body text

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

小云云
Release: 2018-01-02 13:51:15
Original
7233 people have browsed it

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();
    }
   })
  }
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template