【Springboot+Vue】做一个权限管理后台（六）：用户凭证与登出

前言

当一个用户登录以后，如果做每一件事情都需要再次携带用户名密码访问数据库认证，验证通过后才可以做，那么无疑增大了数据库的压力。所以我们就得给已经登录的用户一个凭证，让这个用户以后直接带着这个凭证访问我们的控制层。

服务器端Session和Token

• Session
  Session的状态存储在服务器内存中，每次根据用户的请求拿出对比，效率较高。但是人数多的时候服务器顶不住。

  • 用户登录后，返回给用户该Session的ID，并告诉用户以后访问在请求头中带上这个ID。（服务器存储起来在内存中）

  • 服务器端直接根据请求头判断这个用户的当前状态，是否登录，认证是否过期等。从而减轻了数据库访问的压力。

• Token
  Token的方式与Session类似，但是Token不存储在服务器中，服务器要做的主要是对提交的用户信息进行加密等手段，返回带有一定用户信息的Token给用户，登录流程如下：

  • 用户登录，根据用户信息按照算法生成Token返回给用户，并告诉用户以后在请求头中带上。（服务器不存储）

  • 服务器根据请求头中的Token信息，解析出来当前用户的信息状态。

客户端cookie、localStorage、sessionStorage

图源——JS 详解 Cookie、 LocalStorage 与 SessionStorage

前端保存授权信息：Vuex

那么前端拿到后端生成的凭证如何存储呢？这就需要引入Vue中一个持久化的存储方案——Vuex，它可以将信息保存在当前的Vue状态下，需要的时候直接取出。

1. 安装
   在VScode的终端中输入：
   npm install vuex --save
   
2. 封装axios请求，让每次请求头带上凭证。
   在src文件夹下创建utils文件夹，创建http.js文件，具体代码可以参考我的——对axios的封装。
   
   这样每次请求都会去拿存储在vuex中的token信息。
3. 配置 vuex
   在src文件夹下创建store文件夹，下面创建index.js文件，在其中配置vuex的代码。

   import Vue from 'vue'
   import Vuex from 'vuex'
    
   Vue.use(Vuex)
   const key = 'user'
   const store = new Vuex.Store({
        
     state : {
        
       username:window.localStorage.getItem('user' || '[]') == null ?'' : JSON.parse(window.localStorage.getItem('user' || '[]')).username,
       token:''
     },
     mutations: {
        
       setUserName(state,username){
        
         state.username = username
       },
       setUserToken(state,token){
        
         state.token = token
       },
       logout(state,user){
        
         state.username=null,
         state.token