token以及axios响应拦截器请求拦截器

一、token的介绍

1.概念

访问权限的令牌，本质上是一串字符串

2.创建

正确登录后，由后端签发并返回

3.作用

判断是否有登录状态等，控制访问权限

注意：前端只能判断有无token，而后端才能判断token的有效性

4.使用

目标：只有登录状态，才能访问内容页面

1.在utils/auth.js中判断有无token令牌字符串，则强制跳转到登录页面

2.在登录成功后，保存token令牌字符串到本地，再跳转到首页

//1.1 判断无 token 令牌字符串，则强制跳转到登录页
const token = localStorage.getItem('token')
if (!token) {
    location.href = '../login/index.html'
}

此时我们还没登录

我们现在通过改变网址看看能不能直接进入首页

我们发现，是不能的，它会马上跳转到登录页面

/**
 * 目标1：验证码登录
 * 1.1 在 utils/request.js 配置 axios 请求基地址
 * 1.2 收集手机号和验证码数据
 * 1.3 基于 axios 调用验证码登录接口
 * 1.4 使用 Bootstrap 的 Alert 警告框反馈结果给用户
 */
document.querySelector('.btn').addEventListener('click', () => {
    const form = document.querySelector('.login-form')
    const data = serialize(form, { hash: true, empty: true })
    console.log(data)
    //1.3 基于 axios 调用验证码登录接口
    axios({
        url: '/v1_0/authorizations',
        method: 'POST',
        data
    }).then(result => {
        myAlert(true, '登录成功')
        console.log(result)
        //登录成功，保存token令牌字符串到本地，并跳转到内容列表页面
        localStorage.setItem('token', result.data.token)
        setTimeout(() => {
            //延迟跳转，
            location.href = '../content/index.html'
        }, 1500)
    }).catch(error => {
        myAlert(false, error.response.data.message)
        console.dir(error.response.data.message)
    })
})

登录以后，我们把token令牌字符串保存到本地，跳转到首页

二、axios请求拦截器

1.概念

axios请求拦截器：发起请求之前触发的配置函数，对请求参数进行额外配置

2.使用场所

有公共配置和设置时，统一设置在请求拦截器中

3.代码示例

axios.interceptors.request.use(function (config) {
    const token = localStorage.getItem('token')
    token && (config.headers.Authorization = `Bearer ${token}`)
    //在发送请求之前做些什么
    return config;
}, error => {
    //对请求错误做些什么
    return Promise.reject(error);
});

三、axios响应拦截器

1.概念

axios响应拦截器：响应回到then/catch之前，触发的拦截函数，对响应结果统一处理

2.什么时候触发成功/失败的回调函数

状态为2XX触发成功回调，其他则触发失败的回调函数

3.代码示例

//响应拦截器
axios.interceptors.response.use(response => {
    // Do something before response is sent
    //对响应数据做一些操作，直接返回服务器的响应结果
    const result = response.data
    return result;
}, error => {
    // Do something with response error
    console.dir(error)
    if (error?.response?.status === 401) {
        alert('身份验证失败，请重新登录')
        localStorage.clear()
        location.href = '../login/index.html'
    }
    return Promise.reject(error);
});