Vue.js & Vuex：在Store中存储AccessToken并实现登录后跳转

没问题，我帮你梳理一下在Vuex中存储AccessToken、实现登录跳转的完整流程，都是实际项目里常用的写法，很容易落地👇

1. 配置Vuex的Store入口（index.js） #

首先在src/store/index.js里创建store实例，定义好需要存储的state字段，同时引入我们要写的mutations：

import { createStore } from 'vuex'
import mutations from './mutations'

export default createStore({
  state: {
    // 存储用户的access token
    accessToken: '',
    // 存储refresh token对应的时间戳，用来判断是否需要刷新token
    refreshTimestamp: 0
  },
  mutations,
  // 如果需要异步操作（比如登录请求），可以加actions，这里先聚焦核心逻辑
  actions: {},
  modules: {}
})

2. 编写Mutations（mutations.js） #

在src/store/mutations.js里创建修改state的mutation方法，要遵循Vuex的规范——只能通过mutation修改state：

export default {
  // 设置access token
  SET_ACCESS_TOKEN(state, token) {
    state.accessToken = token
  },
  // 设置refresh token的时间戳
  SET_REFRESH_TIMESTAMP(state, timestamp) {
    state.refreshTimestamp = timestamp
  }
}

3. Test.vue中的登录按钮逻辑 #

在你的登录组件Test.vue里，绑定点击事件，处理登录请求，成功后调用Vuex的mutation设置token和时间戳，最后跳转到指定页面：

<template>
  <div class="login-container">
    <!-- 假设这里有账号密码输入框 -->
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      try {
        // 1. 调用后端登录接口，获取token和刷新时间戳
        const loginRes = await this.$axios.post('/api/login', {
          username: this.username,
          password: this.password
        })
        const { accessToken, refreshExpire } = loginRes.data

        // 2. 通过Vuex的commit调用mutation设置state
        this.$store.commit('SET_ACCESS_TOKEN', accessToken)
        // 这里假设refreshExpire是过期时间戳，直接存进去；如果是过期时长，就计算当前时间+时长
        this.$store.commit('SET_REFRESH_TIMESTAMP', refreshExpire)

        // 3. 跳转到指定页面，比如首页或者用户之前访问的页面
        // 如果是固定跳转首页：
        this.$router.push('/home')
        // 如果要跳转到用户登录前的目标页面，可以从路由的query里取：
        // const redirect = this.$route.query.redirect || '/home'
        // this.$router.push(redirect)
      } catch (error) {
        // 处理登录失败的情况，比如提示用户账号密码错误
        console.error('登录失败:', error)
        this.$message.error('账号或密码错误，请重试')
      }
    }
  }
}
</script>

4. 实用的额外建议 #

• Token持久化：如果希望页面刷新后token不丢失，可以在mutation里把token同时存在localStorage里，然后在store的初始化钩子（或App.vue的created）里从localStorage读取并恢复state：

  // 在mutations的SET_ACCESS_TOKEN里加一行
  localStorage.setItem('accessToken', token)
  // 在store的index.js里添加初始化逻辑（Vue3可在setup中处理）
  export default createStore({
    // ...其他配置
    state: { /* ... */ },
    mutations,
    actions: {
      initToken({ commit }) {
        const savedToken = localStorage.getItem('accessToken')
        if (savedToken) {
          commit('SET_ACCESS_TOKEN', savedToken)
        }
      }
    },
    // Vue2中可在store实例创建后调用，Vue3可在App.vue的onMounted中调用store.dispatch('initToken')
  })
  

• 路由守卫验证：可以在路由的全局前置守卫里检查accessToken，未登录的用户跳转到登录页，同时记录当前页面作为跳转目标：

  // src/router/index.js
  import store from '@/store'
  
  router.beforeEach((to, from, next) => {
    const accessToken = store.state.accessToken
    // 给需要登录的路由配置meta.requireAuth: true
    if (to.meta.requireAuth && !accessToken) {
      next({ path: '/login', query: { redirect: to.fullPath } })
    } else {
      next()
    }
  })
  

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