1:在router index.js 文件里面设置全局路由守卫
router.beforeEach((to,from,next)=>{
let token = localStorage.getItem("loginToken");
if( token || to.path === '/login'){
next()
}else{
next('/login')
}
})
2:登录成功时候存储token
request.post("/user/login",this.form).then(res=>{
if(res.code === 200){
sessionStorage.setItem("userToken",res.data.token)
console.log("------用户登录成功")
localStorage.setItem("loginToken",res.data.token);
if(res.data.grade === 1){
this.$router.push("/sHome")
}
else if(res.data.grade === 2){
this.$router.push("/tHome")
}
this.$message({
type:"success",
message:"登陆成功"
})
}else{
this.$message({
type:"error",
message:res.msg,
})
}
})
3:axios请求时设置请求头,携带token
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
config.headers['token'] = localStorage.getItem("loginToken");
return config
}, error => {
return Promise.reject(error)
});
4:后端接收登录请求的时候设置token,返回给前端
@PostMapping("/login")
public R<User> login(@RequestBody User user){
String account = user.getAccount();
String password = user.getPassword();
LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(User::getAccount,account);
queryWrapper.eq(User::getPassword,password);
User userR = userService.getOne(queryWrapper);
String token = JWTUtil.token(userR.getId(),userR.getAccount(),userR.getGrade());
userR.setToken(token);
if(userR!=null){
log.info("用户成功登录");
return R.success(userR);
}
return R.error("用户名或密码错误");
}