1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码
2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token
3、前端拿到token,将token存储到localStorage中,并跳转路由页面
4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面
调登录接口成功,在回调函数中将token存储到localStorage中
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
//调用登录接口
loginApi.login(this.form.username, this.form.password).then(response => {
const resp = response.data;
console.log(resp);
if(resp.flag){
//通过token,在加上调用用户信息接口获取数据
loginApi.getInfo(resp.data.token).then(response=>{
const respUser = response.data;
console.log(respUser)
if(respUser.flag){
//将用户信息存储到本地
localStorage.setItem("adminInfo",JSON.stringify(respUser.data))
//将token存储到本地
localStorage.setItem("adminToken",resp.data.token)
//跳转到首页
this.$router.push("/Layout");
}else{
this.$message({
duration : 1 * 1000,
showClose: true,
message: resp.message,
type: 'warning'
});
}
})
}else{
this.$message({
duration : 1 * 1000,
showClose: true,
message: resp.message,
type: 'warning'
});
return false;
}
})
} else {
console.log("error submit");
return false;
}
})
}
}
复制代码
请求头加token
export default {
//登录接口
login(mobile,password){
console.log(base)
return request({
url : base+"/pro-api/user/login",
method : "post",
data : {
mobile,
password,
}
})
},
//获取用户信息接口
getInfo(token){
return request({
method : "get",
url : `${base}/pro-api/user/info/?token=${token}`,
})
}
}
复制代码
每次请求时都会携带token,后台验证不验证token就是后台的问题了
设置token的回复拦截器,对回执码错误的进行操作处理
axios.interceptors.response.use(res=>{
if(res.data.res_code=== 401){
router.replace('/login');
localStorage.removeItem('token')
}
return res
})
复制代码
这个根据后台的回执码自行更改就行