，前后端分离，token验证杂记

前端渲染的项目实现大概思路：

• 第一次登陆，前端请求后端登陆接口，发送用户名和密码；
• 后端验证用户名密码，成功则返回一个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);
}

三、后端如何返回状态码：

1. 直接使用状态码，类似与服务器返回的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 具体代码可以自己查响应码。 返回响应码的方式还有很多，这是其中一种

2. 返回的状态在对象中，这种应该是最简单处理的，当获判断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()
})