前言

前段时间用到了 token 处理登陆，简单弄了一下
https://blog.csdn.net/qq_41399901/article/details/88696054

在这里进行一次深入补充

token

token 一般长这样：
426648ef200b455684cb15d6523a935e.d86c828583c5c6160e8acfee88ba1590
一串加密字符串

为了安全起见，微信小程序、前后端分离开发的项目会用到 token ，
token 的原理很简单，见名思意，用“令牌”来验证用户登陆，
我们通过 api 向后台发送用户登陆的账号密码，后台返回给我们一个 token，
通过设置 ajax 拦截器，将 token 放在header 中，使每次请求带上 token，
在每次发送请求时，让后台先判断 token 是否合法，再进行下一步操作

登陆处理：

    Login({ commit }, userInfo) { // 这里用到了 vue-store
      const username = userInfo.username.trim()
      return new Promise((resolve, reject) => {
        login(username, userInfo.password).then(response => {
          const data = response.data
          setToken(data.token)
          commit('SET_TOKEN', data.token)
          resolve()
          console.log(response)
        }).catch(error => {
          reject(error)
        })
      })
    },

我们这里将 token 临时储存到 cookie 中

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

权限

后台管理的项目都会涉及到权限。一般情况下，在设置权限时，是将 token 发送给后台，后台根据 token 判断登陆者的权限，返回给前端，由此判断登陆权限（需要两个api）

这里需要两个 api，一个是登陆时用的，另一个是 token 传给后台判断权限用的

    GetInfo({ commit, state }) { // 拉取用户信息
      return new Promise((resolve, reject) => { // primise封装异步函数
        getInfo(state.token).then(response => { // 拉取用户信息的api
          const data = response.data
          if (data.roles && data.roles.length > 0) {
            commit('SET_ROLES', data.roles) // vue-store
          } else {
            reject('getInfo: roles must be a non-null array !')
          }
          commit('SET_NAME', data.name)
          commit('SET_AVATAR', data.avatar)
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },

登出

登出很简单，只需要将 token 从 vue-store 中删除就行

部分代码如下：

    // 登出
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout(state.token).then(() => {
          commit('SET_TOKEN', '')
          commit('SET_ROLES', [])
          removeToken()
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 前端 登出
    FedLogOut({ commit }) {
      return new Promise(resolve => {
        commit('SET_TOKEN', '')
        removeToken()
        resolve()
      })
    }

更详细的链接：
https://segmentfault.com/a/1190000009506097