如何不使用local storage将JWT token存入VueX且对用户不可见

一、不使用localStorage存储JWT到VueX的简便实现 #

这是非常轻量的实现方式，不需要额外依赖：

1. 基础VueX配置（小项目直接用根store即可） #

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    jwtToken: null
  },
  mutations: {
    // 存储token
    SET_JWT_TOKEN(state, token) {
      state.jwtToken = token
    },
    // 清空token（登出时调用）
    CLEAR_JWT_TOKEN(state) {
      state.jwtToken = null
    }
  },
  getters: {
    // 读取token
    getJwtToken: state => state.jwtToken
  }
})

2. 调用方法 #

• 登录接口拿到JWT后，直接调用mutation存储：
  this.$store.commit('SET_JWT_TOKEN', 接口返回的token值)
• 接口请求时从getter取token放到请求头：

  // axios请求拦截器示例
  axios.interceptors.request.use(config => {
    const token = store.getters.getJwtToken
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  })
  

3. 解决页面刷新VueX数据丢失问题 #

因为VueX是内存存储，刷新会清空数据，不需要localStorage的话可以选以下方案：

• 每次页面初始化时，调用后端静默刷新凭证的接口，拿到新的JWT后重新存入VueX，用户无感知
• 直接改用HttpOnly Cookie存储JWT，浏览器会自动携带，不需要前端主动存储，完全规避本地存储问题

二、实现token对普通用户不可见的方案 #

注：前端运行环境下不可能100%阻止有调试能力的用户获取token，只能提高获取门槛，实现普通用户/访客无法查看的需求，推荐优先级如下：

最高安全方案（推荐） #

直接由服务端在登录响应时返回Set-Cookie头，将JWT存入Cookie，同时设置以下属性：

• HttpOnly：禁止前端JS读取该Cookie，完全不会暴露给前端代码
• Secure：仅在HTTPS请求下携带Cookie
• SameSite=Strict：避免跨站请求伪造风险
  这种方案下前端完全接触不到token内容，普通用户根本没有查看途径，也不需要把token存到VueX，浏览器会自动在同域请求时携带。

存入VueX时的防查看优化 #

如果必须把token存在VueX里，可以做以下处理提高查看门槛：

• 生产环境关闭Vue Devtools，避免用户直接通过Vue开发者工具查看VueX的state内容：

  // main.js 生产环境配置
  if (process.env.NODE_ENV === 'production') {
    Vue.config.devtools = false
    Vue.config.productionTip = false
  }
  

• 不要在任何业务代码、控制台打印语句中输出token，仅在封装的请求拦截器内部读取使用
• 对存入VueX的token做自定义混淆加密，读取使用时再解密，增加用户通过内存快照查找明文token的成本

内容的提问来源于stack exchange，提问作者Tarikul islam Nahid