一、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);
});