Skip to content

Vue Family Bucket + axios front-end implements login interception, logout, interceptor and other functions

License

Notifications You must be signed in to change notification settings

stophobia/vue-axios-github

This branch is 1 commit ahead of superman66/vue-axios-github:master.

Repository files navigation

Travis

A project learns how to implement login interception on the front end

A project learns to use vue family bucket + axios to implement login, interception, and logout functions, and to use axios's http interceptor to intercept requests and responses.

Click here to view πŸ‘‰ Demo

Can't open the page? Maybe you need to jump over the wall. Click to view circumvention recommendations

Preface

This project uses the personal token provided by Github as a login token, and accesses your Repository List through the token. Learn how to implement what is needed in a front-end project through this project Login and interception, logout, token invalidation interception and the use of the corresponding axios interceptor.

Prepare

You need to generate your own Github Personal Token first (Generate Token). After the Token is generated, visit Demo to view your Repository List.

Project structure

.
β”œβ”€β”€ README.md
β”œβ”€β”€ dist  // Package the built folder
β”‚   β”œβ”€β”€ build.js
β”‚   └── build.js.map
β”œβ”€β”€ index.html
β”œβ”€β”€ package.json
β”œβ”€β”€ src
β”‚   β”œβ”€β”€ App.vue
β”‚   β”œβ”€β”€ assets
β”‚   β”‚   β”œβ”€β”€ css.css
β”‚   β”‚   β”œβ”€β”€ icon.css
β”‚   β”‚   └── logo.png
β”‚   β”œβ”€β”€ constant
β”‚   β”‚   └── api.js  // Configure api interface file
β”‚   β”œβ”€β”€ http.js // Encapsulate fetch, post requests and http interceptor configuration files
β”‚   β”œβ”€β”€ index.vue
β”‚   β”œβ”€β”€ login.vue
β”‚   β”œβ”€β”€ main.js
β”‚   β”œβ”€β”€ repository.vue
β”‚   β”œβ”€β”€ router.js // routing configuration file
β”‚   └── store
β”‚       β”œβ”€β”€ store.js  
β”‚       └── types.js  // vuex types
└── webpack.config.js

technology stack

  • Vue 2.0
  • vue-router
  • vuex
  • axios
  • vue-material

Login interception logic

Step one: Route interception

First, when defining a route, you need to add a custom field requireAuth to determine whether access to the route requires login. If the user is already logged in, the route will be entered successfully. Otherwise, go to the login page.

const routes = [
    {
        path: '/',
        name: '/',
        component: Index
    },
    {
        path: '/repository',
        name: 'repository',
        meta: {
            requireAuth: true,  // Add this field to indicate that you need to log in to enter this route
        },
        component: Repository
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    }
];

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

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {  // Determine whether the route requires login permissions
        if (store.state.token) {  // Get whether the current token exists through vuex state
            next();
        }
        else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}  // Use the jump route path as a parameter and jump to this route after successful login.
            })
        }
    }
    else {
        next();
    }
})

Each hook method receives three parameters:

  • to: Route: The target routing object that is about to enter
  • from: Route: The route that the current navigation is about to leave
  • next: Function: This method must be called to resolve this hook. The execution effect depends on the calling parameters of the next method.
    • next(): Perform the next hook in the pipeline. If all hooks are executed, the navigation status is confirmed.
    • next(false): Interrupt current navigation. If the browser's URL changes (perhaps manually by the user or by the browser's back button), the URL address will be reset to the address corresponding to the from route.
    • next('/') or next({ path: '/' }): Jump to a different address. The current navigation is interrupted and a new navigation is started.

**Make sure to call the next method, otherwise the hook will not be resolved. **

For the complete method, see /src/router.js

Among them, to.meta contains our customized data, including the requireAuth field we just defined. Use this field to determine whether the route requires login permissions. If necessary, and if there is no token in the current application, jump to the login page and log in. After successful login, jump to the target route.

Does login interception end here? not at all. This method is just a simple front-end routing control and cannot really prevent users from accessing routes that require login permissions. There is another situation: the current token has expired, but the token is still saved locally. At this time, when you access a route that requires login permissions, you should actually ask the user to log in again. At this time, it needs to be judged by combining the http status code returned by the http interceptor + the backend interface.

Step 2: Interceptor

If you want to handle all http requests and responses uniformly, you have to use the axios interceptor. By configuring http response inteceptor, when the backend interface returns 401 Unauthorized (unauthorized), the user is allowed to log in again.

// http request interceptor
axios.interceptors.request.use(
    config => {
        if (store.state.token) {  // Determine whether there is a token. If it exists, add the token to each http header.
            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, clear token information and jump to the login page
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        return Promise.reject(error.response.data)   // Returns the error information returned by the interface
    });

See /src/http.js for the complete method.

Through the above two steps, login interception can be implemented on the front end. The logout function is very simple. You only need to clear the current token and jump to the homepage.

Run and build

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

About

Vue Family Bucket + axios front-end implements login interception, logout, interceptor and other functions

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 68.0%
  • Vue 28.5%
  • HTML 3.5%