Vue.js中如何将LocalStorage中的JWT设为全局认证令牌

1. 修正登录流程的Token存储逻辑 #

你当前登录后把res1.access_token存到了LocalStorage，但Vuex里仍使用旧的data.id作为token，需要将两者统一为access_token：

修改登录表单的handleSubmit #

去掉多余的JSON.stringify（access_token本身是字符串，无需序列化），同时同步到Vuex：

async handleSubmit () {
  console.log('on handleSubmit()')
  this.$refs.loginForm.validate(async (valid) => {
    if (this.loginLoading) return
    this.loginLoading = true
    try {
      if (valid) {
        const { userName, password } = this.form
        const res1 = await this.handleLogin({ userName, password })
        const res2 = await this.getUserInfo()
        console.log('>>> handleSubmit:33', { res1, res2 })
        console.log('>>> confighomename', this.$config.homeName)
        
        // 直接存字符串类型的token到LocalStorage
        localStorage.setItem('token', res1.access_token)
        // 同步到Vuex，方便组件内快速获取
        this.$store.commit('setToken', res1.access_token)

        this.$emit('on-login-success', {
          username: this.form.userName,
          password: this.form.password
        })
        this.loginLoading = false
      }
    } catch (error) {
      console.error('登录失败:', error)
      this.loginLoading = false
    }
  })
}

修改Vuex的handleLogin Action #

替换原有存储data.id的逻辑，改为存储access_token：

async handleLogin ({ commit }, { userName, password }) {
  try {
    userName = userName.trim()

    const res = await RestClient.request({
      url: '/api/auth/login', method: 'POST', data: { username: userName, password }
    })

    const data = res.data
    // 使用access_token作为全局认证令牌
    const accessToken = data.access_token

    commit('setTagNavList', [])
    commit('setToken', accessToken)
    commit('setData', data)

    // 同步存入LocalStorage，避免Vuex刷新丢失
    localStorage.setItem('token', accessToken)

    return data
  } catch (error) {
    console.error('>>> Error in handleLogin API: ', error)
    throw error
  }
}

2. 配置全局请求拦截器，统一携带Token #

找到你的RestClient封装文件（通常是axios实例配置），添加请求拦截器，自动为所有接口带上LocalStorage中的token：

// 假设RestClient是axios实例
RestClient.interceptors.request.use(
  config => {
    // 从LocalStorage读取token
    const token = localStorage.getItem('token')
    if (token) {
      // 根据后端要求的认证格式设置，示例为Bearer Token
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

3. 页面刷新时恢复Token到Vuex #

Vuex存储在内存中，页面刷新会丢失，需要在应用初始化时从LocalStorage恢复token：

在main.js中添加初始化逻辑 #

new Vue({
  router,
  store,
  render: h => h(App),
  created() {
    // 页面刷新时读取LocalStorage的token同步到Vuex
    const token = localStorage.getItem('token')
    if (token) {
      this.$store.commit('setToken', token)
    }
  }
}).$mount('#app')

4. 验证接口兼容性 #

确保getUserInfo等所有业务接口都通过RestClient发送请求，这样拦截器会自动携带token。如果有单独封装的接口，也要统一使用相同的认证头逻辑。

完成以上配置后，LocalStorage中的token就会作为全局认证令牌，在所有功能接口请求中自动携带，替代原有认证令牌实现全权限访问。

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