如何在Nuxt项目中将JWT解码后的数据存储到Vuex中

1. 首先创建Vuex的auth状态模块 #

在Nuxt项目的store目录下新建auth.js文件，代码如下：

export const state = () => ({
  isAuthenticated: false,
  userInfo: {
    roles: [],
    // 可自行扩展其他需要从JWT中提取的字段，比如用户名、用户ID等
  }
})

export const mutations = {
  // 存储用户认证信息
  SET_AUTH(state, userData) {
    state.isAuthenticated = true
    state.userInfo = userData
  },
  // 清空认证信息
  CLEAR_AUTH(state) {
    state.isAuthenticated = false
    state.userInfo = { roles: [] }
  }
}

2. 修改现有auth.js逻辑，对接Vuex #

建议把现有auth.js改为Nuxt插件，这样可以直接获取到$store实例，修改后的完整代码如下：

import axios from "axios";
import jwtDecode from "jwt-decode";

// 封装为Nuxt插件，注入到全局实例
export default ({ store }, inject) => {
  const auth = {
    login: async (data) => {
      const token = await axios
        .post(process.env.baseUrl + 'login_check', data)
        .then(response => response.data.token)

      window.localStorage.setItem("authToken", token)
      axios.defaults.headers["Authorization"] = "Bearer " + token;
      
      // 解码JWT获取用户数据存入Vuex
      const jwtData = jwtDecode(token)
      store.commit('auth/SET_AUTH', jwtData)
    },

    logout: () => {
      window.localStorage.removeItem("authToken")
      delete axios.defaults.headers['Authorization'];
      // 清空Vuex存储的用户数据
      store.commit('auth/CLEAR_AUTH')
    },

    verifToken: () => {
      const token = window.localStorage.getItem("authToken");
      if (token) {
        const jwtData = jwtDecode(token);
        if (jwtData.exp * 1000 > new Date().getTime()) {
          axios.defaults.headers["Authorization"] = "Bearer " + token;
          // 页面刷新/初始化时重新写入用户数据到Vuex
          store.commit('auth/SET_AUTH', jwtData)
          return true
        } else {
          this.logout();
        }
      } else {
        this.logout();
        console.log("no token")
      }
      return false
    }
  }
  // 全局注入$auth方法，页面中可直接通过this.$auth调用相关接口
  inject('auth', auth)
}

之后到nuxt.config.js中注册这个插件：

export default {
  // 其他配置项
  plugins: [
    '~/path/to/your/auth.js' // 替换为你实际的auth.js文件存放路径
  ]
}

3. 页面中使用存储的角色信息 #

你可以在任意页面/组件中直接从Vuex读取角色信息，控制内容展示：

<template>
  <div>
    <!-- 仅管理员可见的内容 -->
    <div v-if="$store.state.auth.userInfo.roles.includes('ROLE_ADMIN')">
      管理员专属操作区
    </div>
    <!-- 所有登录用户可见的内容 -->
    <div v-if="$store.state.auth.isAuthenticated">
      普通用户可见内容
    </div>
  </div>
</template>

补充说明 #

如果你的Symfony JWT返回的角色字段不是默认的roles，或者需要自定义存储的字段，修改SET_AUTH传入的参数即可。另外建议在全局布局文件或者路由中间件中初始化时调用一次$auth.verifToken()，避免页面刷新后Vuex的用户数据丢失。

内容的提问来源于stack exchange，提问作者chtouk