实现思路:
![](https://img-blog.csdnimg.cn/direct/f9fa170d50dc4d1a92ce1dec95590425.png)
一.获取用户token并持久化数据
![](https://img-blog.csdnimg.cn/direct/9b560a8da50c41c69d9dc150d743b6d5.png)
//本地存储
localStorage.setItem("token", baseResult.other.token)
二.配置axios插件(处理需要的token)
2.1导入axios
![](https://img-blog.csdnimg.cn/direct/bbed8164a010448eabc0f525637f5c84.png)
2.2 请求携带token 与重定向
![](https://img-blog.csdnimg.cn/direct/2e626828e51647f1b5d5528151242a18.png)
//导入element ui message
import { MessageBox } from 'element-ui'
export default function ({ $axios, redirect }) {
$axios.onRequest((config) => {
//获得token
let token = localStorage.getItem("token");
//携带token
$axios.setToken(token);
});
$axios.onError((error) => {
// 获得状态码
const code = parseInt(error.response && error.response.status);
console.log(code,"code");
//重定向
if (code === 400) {
redirect("/400");
}
if(code === 401) {
//删除无效token
localStorage.removeItem('token')
//提示
MessageBox.confirm(error.response.data, '提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//确定,跳转到登录
location.href = '/user/login'
}).catch(() => {
//取消
});
}
});
}