前端渲染的项目实现大概思路:
- 第一次登陆,前端请求后端登陆接口,发送用户名和密码;
- 后端验证用户名密码,成功则返回一个token;
- 前端拿到token,存到localStorage或sessionStorage,跳转页面;
- 前端设置路由守卫,除了login其他界面进去先判断是否有token,没有就回到login
- 前端axios请求拦截,在axios中配置请求数据前带上token;
- 后端验证请求,token有效则返回数据,无效返回401;
- 前端在axios响应拦截中判断状态码,401则清除token,回到登陆页面
常见问题记录:
一、前端如何请求带上token:
找到自己封装的axios,有个请求拦截器:
instance.interceptors.request.use(config =>{
//一般从vuex,也可以从本地
config.headers.token = localStorage.getItem('token')
return config
},err=>{
console.log(err);
})
二、后端如何获取前端的请求头:
通过 @RequestHeader(“token”)就可以把刚才的token拿到了,然后在自己进行校验。
@GetMapping("/getScreen")
ResponseEntity<String> getScreen(@RequestHeader("token") String token){
return new ResponseEntity<>(token, HttpStatus.OK);
}
三、后端如何返回状态码:
直接使用状态码,类似与服务器返回的404,500一样,当我验证token失效时,直接返回401状态。在后端中具体可以这样:
@GetMapping("/hello")
ResponseEntity<String> hello() {
return new ResponseEntity<>("Hello World!", HttpStatus.OK);
}
这里HttpStatus.OK中的OK代表请求成功,这样写前端就会接受到“hello world”并且响应码是200。如果要返回401则
HttpStatus.UNAUTHORIZED 具体代码可以自己查响应码。
返回响应码的方式还有很多,这是其中一种
返回的状态在对象中,这种应该是最简单处理的,当获判断token无效时,返回自定义响应数据,响应码为200。这样前端拿到数据再去跳转登陆界面。
四、前端如何处理响应码:
当响应码是401的时候,请求是失败的,这时候可以在axios响应拦截器里面处理.
instance.interceptors.response.use(res =>{
return res
},err=>{
if(err.response.status){
switch (err.response.status){
//token失效
case 401:
alert('登陆失效,请重新登陆')
router.replace('/login').catch(() =>{})
}
}
})
五、路由导航守卫:
router.beforeEach((to, from, next) => {
//放行login
if (to.path == '/login') return next()
//没有token,全部劫持
if(!localStorage.getItem("token")) return next('/login')
//否则放行
next()
})