vue http request Authorization authentication to judge login status request data

1. Obtain the token to determine whether the token exists.

2. In the http request interceptor, add the Authorization authentication field to the request header.

3. Vuex warehouse configuration.

     1. vuex persistence

     2. vuex template reference

4. http request interceptor configuration.

1. Obtain the token to determine whether the token exists

import store from '../store/index';
let util = {
    //获取token
    getToken() {
        return store.getters.token;
    },
    //判断token是否存在
    tokenExist() {
        let flag;
        let token = store.getters.token;
        if (token && token !== '') {
            flag = true;
        } else {
            flag = false;
        }
        return token;
    },
}
export default util

2. Add the following fields to the http request interceptor

let tokenExist = util.tokenExist();
        if (tokenExist) {
            //如果token存在
            config.headers['Authorization'] = `Bearer ${util.getToken()}`;
        }

3. vuex warehouse configuration

1. vuex persistence

2. vuex template reference

index.js content

import Vue from "vue"
import Vuex from "vuex"
import VuexPersistence from 'vuex-persist';
import db from './db'

Vue.use(Vuex)
//vuex 状态持久化
const vuexLocal = new VuexPersistence({
    storage:window.localStorage
})

const store = new Vuex.Store({
    state:{},
    mutations:{},
    actions:{},
    modules:{
        db
    },
    plugins:[vuexLocal.plugin]
})
export default store

 db.js content

const db = {
    state: {
        token: '',
    },
    getters:{
        token:state => state.token
    },
    mutations: {
        // 存储token
        setToken: (state, value) => {
            state.token = value
        }
    },
    actions: {}
}
export default db

4. http request interceptor configuration

// http request 请求拦截器，有token值则配置上token值
import axios from 'axios'
import Promise from 'promise'
import util from './utils';
import store from './../store/index';
const service = axios.create({
    timeout: 60000, // 请求超时时间
    headers: {
        // Authorization: Authorization,
        'Content-Type': 'application/json;charset=UTF-8'
    }
});

// http请求拦截器
service.interceptors.request.use(
    config => {
        let tokenExist = util.tokenExist();

        if (tokenExist) {
            // bus.$emit('toggleloading', true)//显示loading
            //如果token存在
            config.headers['Authorization'] = `Bearer ${util.getToken()}`;
        }
        // Toast.loading({
        //     message: '加载中...',
        //     duration: 0,
        //     forbidClick: true
        // });
        return config;
    },
    error => {
        Promise.reject(error);
    }
)

// http response 服务器响应拦截器，
// 这里拦截401错误，并重新跳入登页重新获取token
service.interceptors.response.use(
    response => {

        if (response.status === 200) {
            //通讯成功

            // Toast.clear();

            /*************
             * response.data.status === 0 错误
             * response.data.status === 100 成功
             * response.data.status === 401 token过期
             *
             * *************/

            // bus.$emit('toggleloading', false)//隐藏loading
            if (response.data.state === 401) {
                //如果是token过期，跳转至登录
                Message.error("登录已过期，请重新登录！");
                store.commit('SET_TOKEN', '');
                util.goLogin();
            } else if (response.data.state === 0) {
                // Message.error(response.data.message);
                return response.data;
            } else {
                return response.data;
            }
        }
    },
    error => {
        //请求失败
        // ;
        const response = error.response;
        if (response.status === 401) {
            // Toast.fail(response.data.message);
            Message.error("登录已过期，请重新登录！");
            util.goLogin();
        } else if (response.status === 403) {
            $router.push({
                name: '403'
            });
        } else {
            // Toast.fail(response.data.message ? response.data.message : '系统错误请联系管理员');
            // Message.error({
            //     message: '无服务，请联系管理员'
            // });
        }

        return Promise.reject(error);
    }
);

export default service;

For http request interceptor configuration, please watch my previous article: https://blog.csdn.net/CCKing7/article/details/122278522
 

If it is useful, please like it, follow it and add to favorites (｡･ω･｡)ﾉ♡