登录

路由守卫

router.beforeEach((to, from, next) => {
  /**
   * 根据token判断用户是否登录
   * 如果有token, 则允许访问
   * 如果没有token, 则跳转到登录页面
   */
  const store = useUserStore()
  if (!store.user.token && !['/login', '/other'].includes(to.path)) return '/login'
})

设置请求拦截器和访问拦截器

通过设置默认请求头，来进行token的获取 axios.defaults.headers['Authorization'] = 'Basic XXXX'.

获得token后，将token保存在Cookies和VueX中.

在请求拦截器加入如下判断：如果Cookies里面有数据，那么重复赋值请求头,

将Cookies中的token放在请求头的后面 config.headers['Authorization'] = 'Bearer ' + getToken()

import axios from 'axios'
import { Notification, MessageBox, Message } from 'element-ui'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
axios.defaults.headers['Authorization'] = 'Basic enRfaHpfZGVtbzpxMWNVTk5wNjV2WjlQODJDR1ZadU92d2lZZVlnQ0t2Z3Z6OFpLWHlI'
// 创建axios实例
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: process.env.VUE_APP_BASE_API,
    // 超时
    timeout: 30000
})
// request拦截器
service.interceptors.request.use(config => {
    console.log('config', config)
    // 是否需要设置 token
    const isToken = (config.headers || {}).isToken === false
    if (getToken() && !isToken) {
        config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    // get请求映射params参数
    if (config.method === 'get' && config.params) {
        let url = config.url + '?';
        for (const propName of Object.keys(config.params)) {
            const value = config.params[propName];
            var part = encodeURIComponent(propName) + "=";
            if (value !== null && typeof (value) !== "undefined") {
                if (typeof value === 'object') {
                    for (const key of Object.keys(value)) {
                        let params = propName + '[' + key + ']';
                        var subPart = encodeURIComponent(params) + "=";
                        url += subPart + encodeURIComponent(value[key]) + "&";
                    }
                } else {
                    url += part + encodeURIComponent(value) + "&";
                }
            }
        }
        url = url.slice(0, -1);
        config.params = {};
        config.url = url;
    }
    return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
    // 未设置状态码则默认成功状态
    const code = res.data.code || 200;
    // 获取错误信息
    const msg = errorCode[code] || res.data.msg || errorCode['default']
    if (code === 401) {
        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
        }
        ).then(() => {
            console.log('重新登录');
            // 解释一下下面这段代码
            // 1. 退出登录
            // 2. 跳转到登录页面
            // 3. 重新加载页面
            // })
        })
    } else if (code === 500) {
        Message({
            message: msg,
            type: 'error'
        })
        console.log('500 Error Msg:' + msg)
        return Promise.reject(new Error(msg))
    } else if (code !== 200) {
        Notification.error({
            title: msg
        })
        console.log('200 Error Msg:' + msg)
        return Promise.reject('error')
    } else {
        return res.data
    }
},
    error => {
        console.log('err' + error)
        let { message } = error;
        if (message == "Network Error") {
            message = "后端接口连接异常";
        }
        else if (message.includes("timeout")) {
            message = "系统接口请求超时";
        }
        else if (message.includes("Request failed with status code")) {
            message = "系统接口" + message.substr(message.length - 3) + "异常";
        }
        Message({
            message: message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

export default service

获取token

将token保存到Cookies 中和VueX中

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken() {
    return Cookies.get(TokenKey)
}

export function setToken(token) {
    return Cookies.set(TokenKey, token)
}

export function removeToken() {
    return Cookies.remove(TokenKey)
}