Vue+axios Front end for login interception

Reference: http://blog.csdn.net/qq673318522/article/details/55506650 Login intercept Logic First step: routing interception

First, when you define a route, you need to add a custom field to requireAuth determine whether access to the route requires a login. If the user is already logged in, the route goes smoothly,
Otherwise, enter the login page.

Const ROUTES = [    {        path: '/',        Name: '/',        component:index    },    {        path: '/repository ',        Name: ' Repository ',        meta: {            requireauth:true,  //Add this field to indicate that the route is required to log in        },        component: Repository    },    {        path: '/login ',        name: ' Login ',        component:login    }];

After defining the route, we mainly use vue-router the provided hook function beforeEach() to determine the routing.

Router.beforeeach (to, from, next) = {    if (to.meta.requireAuth) {  ///Determines if the route requires login permission if        ( Store.state.token) {  //Vuex state to get the current token if there is a            next ();        }        else {            Next {                path: '/login ',                query: {redirect:to.fullPath}  //will jump route path as parameter, jump to the route after successful login            })        }    }    else {        next ();    }})

　　

Each hook method receives three parameters:
* To:route: The target routing object to be entered
* From:route: The route on which the current navigation is going to leave
* Next:function: Be sure to call this method to resolve this hook. The execution effect relies on the invocation parameters of the next method.
* Next (): Make the next hook in the pipeline. If all hooks are finished, the navigation is confirmed (confirmed).
* Next (FALSE): interrupts the current navigation. If the URL of the browser changes (possibly the user manual or the browser back button), then the URL address is reset to the address corresponding to the from route.
* Next ('/') or next ({path: '/'}): Jump to a different address. The current navigation is interrupted, and then a new navigation is made.

Make sure that you call the next method, otherwise the hooks will not be resolved.

See the complete approach/src/router.js

Among them, to.meta we customize the data, including the fields we just defined requireAuth . Use this field to determine whether the route requires logon permissions. If required, the current app does not have tokens, then jump to the login page and sign in. Jump to destination route after successful login.

Login intercept is this the end of the block? And not. This approach is simply a front-end routing control and does not really prevent users from accessing routes that require logon privileges. Another case is that the current token is invalid, but token is still stored locally. When you visit a route that requires login permissions, you should actually let the user log in again.
At this point you need to combine the HTTP Interceptor + back-end interface returned by the HTTP status code to judge.

Step Two: Interceptors

To handle all HTTP requests and responses uniformly, you need to use the Axios interceptor. By configuration http response inteceptor , when the backend interface returns 401 Unauthorized（未授权） , let the user log on again.

HTTP request Interceptor Axios.interceptors.request.use (    config + = {        Store.state.token) {  //To determine if token exists, If present, each HTTP header is prefixed with token            config.headers.Authorization = ' token ${store.state.token} ';        return config;    },    err = {        return promise.reject (ERR);    }); /HTTP Response Interceptor Axios.interceptors.response.use (    response        = = {return response;    },    error = > {        if (error.response) {            switch (error.response.status) {case                401:                    ///return 401 to clear token information and jump to login page                    Store.commit (types. LOGOUT);                    Router.replace ({                        path: ' Login ',                        query: {Redirect:router.currentRoute.fullPath}}}}        } Return        promise.reject (error.response.data)   //Return error message returned by Interface    });

　　

Vue+axios Front end for login interception