vue项目中token的使用

token

在第一次登录时，客户端携带用户名与密码向服务端发送登录请求，此时服务端接收到用户名与密码后与数据库进行比对判断，如果正确，就将本地获取sessionID作为token，然后将这个token返回给客户端。这时客户端拿到返回的token令牌，将其保存到sessionStorage中。

window.sessionStorage.setItem('token', res.data.token)

然后再进行跳转路由页面。

this.$router.push('/home')

在接下来的项目中，每次跳转路由，就会根据sessionStorage中保存的token令牌进行判断，如果有则跳转到对应路由页面。

这里为什么将token保存到sessionStorage中而不是localStorage中呢？

是因为token应该是在网站打开期间生效（ localStorage的生命周期是永久性的，而sessionStorage 的生命周期是在浏览器关闭前，也就是说，在整个浏览器未关闭前，其数据一直都是存在的）

在我们完成登录后，后续项目中每次调用后端接口都要在请求头中加入token，也就是在请求头中使用 Authorization 提供token令牌。

那么如何在请求头中添加token呢？

这里我们通过axios请求拦截器添加token，调用axios中的interceptors属性，这个属性中有一个request成员，这个就是请求拦截器，再通过use函数为请求拦截器挂载一个回调函数，也就是在请求到达服务器之前对这个请求先做一个预处理。

axios.interceptors.request.use((config) => {
     
  console.log(config)
  return config
})

通过打印config可以得到

然后将通过登录获取的token加入到headers这个请求头中

axios.interceptors.request.use((config) => {
     
  // console.log(config)
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

在浏览器network的请求头中我们就可以看到 Authorization: null

成功将token加入到了请求头中后，再调用后端接口时服务器就会判断请求头中有无token，如果有token，就拿到token并验证token，验证成功再将数据返回到客户端。