vue http请求 Authorization认证 判断登录状态请求数据

1.获取token判断token是否存在。

2.在http 请求拦截器，请求头添加Authorization认证字段。

3.vuex 仓库配置。

     1.vuex 持久化

     2.vuex 模板引用

4.http请求拦截器配置。

1.获取token判断token是否存在

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.在http 请求拦截器添加以下字段

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

3.vuex 仓库配置

1.vuex 持久化

2.vuex 模板引用

index.js内容

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内容

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

4.http请求拦截器配置

// 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;

http请求拦截器配置请观看我的上一篇文章：https://blog.csdn.net/CCKing7/article/details/122278522
 

有用的话请点赞，关注加收藏哦(｡･ω･｡)ﾉ♡