Vue implements axios interception, page jump and token verification

Step 1: Routing Add one more custom field requiredAuth

 path: '/repository',
    name: 'repository',
    meta: {
      requireAuth: true, // Add this field to indicate that you need to log in to enter this route    },
    component: Repository

Step 2:

((to, from, next) => {
  if () { // Determine whether the route requires login permission    if () { // Get the current token through vuex state whether it exists      next();
    }
    else {
      next({
        path: '/login',
        query: {redirect: } // Use the jumped route path as a parameter, and jump to the route after logging in successfully      })
    }
  }
  else {
    next();
  }

Is the login interception over here? Not.

This method is just a simple front-end routing control and cannot really prevent users from accessing routes that require login permissions. (You can manually enter a route without permission in the browser address bar)

Another situation is: the token is currently invalid, but the token is still saved locally.

At this time, when you access the route that requires login permission, you should actually log in again.

At this time, we need to combine the http status code returned by the http interceptor + the backend interface to judge.

Step 3: Interceptor (To uniformly handle all http requests and responses, you must use axios' interceptor.)

Every time you jump to the page, you need to get the html page corresponding to the new route. At this time, you can use axios http to intercept it.

Every time the route jumps, let the background verify whether the token is valid and add the token in the http header.

When the backend interface returns 401 Unauthorized (unauthorized), let the user log in again.

About Autorization      The token of cookies will be ignored after use, which weakens security and can be used with https

// http request interceptor(
  config => {
    if () { // Determine whether token exists. If it exists, add tokens for each http header       = `token ${}`;
    }
    return config;
  },
  err => {
    return (err);
  });

// http response interceptor
(
  response => {
    return response;
  },
  error => {
    if () {
      switch () {
        case 401: 401 Flag Spiritual Doctor , Use only[Authorization] Flag的医生 That's it Spiritual Doctor

          // Return to 401 Clear token information and jump to the login page          ();
          ({
            path: 'login',
            query: {redirect: }
          })
      }
    }
    return ()  // Return the error message returned by the interface  });

See /src/ for the complete method.

Through the above steps, you can implement login interception on the front end.

The logout function is very simple. You just need to clear the current token and then jump to the homepage.

 github

Direct jump method for background:

This method is as long as there is no login or the login timeout,

Visiting any page will jump to the login page,

The pages that do not require verification were blocked

Load a

//load("<script src='"+(("path") || "/abc")+"/html5/?s'></", "script>");

<c:when test="${isLogin}">
/*
 Configuration File
 */
var FileConfig = { ... }

</c:when>
<c:otherwise>
   = '/html5/';
</c:otherwise>

A reliable axios package

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.