使用token维持用户登录状态的原理及其实现方法

token维持用户登录状态的原理

1、生成token，并返回给客户端
首先用户在客户端进行登录，发送请求给服务端，服务端验证用户和密码是否正确，完全一致后，服务端会生成一个当前用户所对应的一个token值，并在响应中将其返回给客户端。
2、客户端将该token值进行存储
3、携带token发送请求
后续客户端发送请求时，就会携带这个token。
4、服务器端验证token
当服务器拿到客户端提供的token值后，会判断其是否存在，如果存在则会返回对应用户所需要的数据。

实现方法（只讲述前端）

1、用户在登录时，会输入用户名和密码，成功后，服务器会给我们返回一个token值，我们需要将其保存在浏览器的sessionStorage中

//两个参数，一个名称，一个服务端具体返回数值
window.sessionStorage.setItem("token", res.data.token);

2、利用axios的拦截器，每一次发送请求时，将token值，放在请求头中，传给服务器。

axios.interceptors.request.use(function (config) { 
  config.headers['Authorization'] = window.sessionStorage.getItem('token')
  return config
})

3、设置导航守卫，判断token值是存在，如果不存在，返回登录界面

router.beforeEach((to, from, next) => {
  // to => 将要访问的页面
  // from => 代表从哪个路径跳转而来
  // next=>是否放行 next()放行 next('/login')强制跳转到/login

  ///login直接放行
  if (to.path === '/login') return next()

  //其它判断是否有token
  const tokenstr = window.sessionStorage.getItem('token')

  if (!tokenstr) return next('/login')
  next()

})