Vue项目中基于token的登录流程详解，Vuex中刷新数据丢失问题

一.登录原理

1.基本的客户端和服务器端交互

在基于token的登录流程中需要前后端相互配合进行校验，实现登录的安全性

客户端：

1.前端对账号密码进行校验（防止XSS攻击也就是SQL注入），

2.必要时对密码进行加密传输

3.向服务器端发送POST请求携带账号密码

服务器端：

1.获取用户的基本信息，一般都要进行二次校验

2.去数据库中进行数据匹配

    匹配失败：登录失败，将结果返回给客户端

    匹配成功：登录成功，创建一个token值（JWT算法：登录者基本信息+安全密钥+时间），返回客户结果时带上token

 

以上是基本的登录原理

2.客户端对token进行存储

1.把拿到的token存储到LocalStorage中

2.把token存储到vuex中，或者更新islogin的信息，这样在页面没有刷新的情况下，其它组件根据这个就知道登录情况

export default new Vuex.Store({
  state: {
    //token
    token: window.sessionStorage.getItem("token") ? window.sessionStorage.getItem("token") : '',
  }
})

3.Vuex中刷新数据丢失问题

以上方案存在一个致命问题：登录后跳转到别的路由后，或者是刷新了页面，vuex里面存的token数据消失了。

原因：因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例（vuex实例是绑在vue实例上面的。），store里面的数据就会被重新赋值初始化

 方案一：

监听页面是否刷新，如果页面刷新了，将state对象存入到sessionStorage/localStorage中。页面打开之后，判断sessionStorage/localStorage中是否存在state对象，如果存在，则说明页面是被刷新过的，将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。如果不存在，说明是第一次打开，则取vuex中定义的state初始值

    //全局监听，页面刷新的时候将store里state的值存到sessionStorage中，然后从sessionStorage中获取，再赋值给store。然后再把session里面存的删除即可，相当于中间件的作用。
 //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
      sessionStorage.removeItem("store")
    }

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });

方案二：

插件实现：使用vuex持久化 vuex-persistedstate  教程传送门

 1.安装

npm i -S vuex-persistedstate

2.使用

具体使用参考传送门中教程

在vuex初始化时候，作为组件引入

 方案三

如果只是存储token数据

1.向服务器发送请求携带token，

2.服务器端进行JWT反解，判断登录信息是否过期，

3.返回结果

 二.登录再安全升级

大家设想一个场景，假如你登录银行网站，公司人称你不注意把你浏览器的token复制过去，人家进行验证，这样就造成了安全隐患

 发送请求时携带，token,时间戳time,加密令牌sign:token+time三者进行验证，后端根据加密规则校验是否合法，并检验是否重复发送（因为每次发送时间不同）