使用 Vue Router 和 Vuex 验证和刷新 JWT 访问令牌

Question

我使用 axios 和 Vuex 创建了简单的 VueCLI 身份验证模块。

在 store.js 中，我使用 session.js 中的 api 获得了令牌的所有逻辑：

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import sessionSerivce from '@/services/session.js'

Vue.use(Vuex)
Vue.use(require('vue-cookies'))

export const store = new Vuex.Store({
  state: {
    status: '',
    accessToken: $cookies.get('accessToken') || '',
    refreshToken: $cookies.get('refreshToken') || '',
    user: $cookies.get('user') || '',
  },
  actions: {
    login({ commit }, data) {
      return new Promise((resolve, reject) => {
        commit('auth_request')
        sessionSerivce
          .logIn(data)
          .then((resp) => {
            const commitData = {
              accessToken: resp.data.access_token,
              refreshToken: resp.data.refresh_token,
              user: resp.data.user,
            }

            $cookies.set('accessToken', commitData.accessToken)
            $cookies.set('refreshToken', commitData.refreshToken)
            $cookies.set('user', JSON.stringify(commitData.user))

            axios.defaults.headers.common['Authorization'] =
              commitData.accessToken

            commit('auth_success', commitData)
            resolve(resp)
          })
          .catch((err) => {
            commit('auth_error')
            $cookies.remove('accessToken')
            $cookies.remove('refreshToken')
            $cookies.remove('user')
            reject(err)
          })
      })
    },

    verifyToken({ commit, state }) {},

    register({ commit }, data) {
      return new Promise((resolve, reject) => {
        commit('auth_request')
        sessionSerivce
          .register(data)
          .then((resp) => {
            const commitData = {
              accessToken: resp.data.access_token,
              refreshToken: resp.data.refresh_token,
              user: resp.data.user,
            }

            $cookies.set('accessToken', commitData.accessToken)
            $cookies.set('refreshToken', commitData.refreshToken)
            $cookies.set('user', JSON.stringify(commitData.user))

            axios.defaults.headers.common['Authorization'] =
              commitData.accessToken

            commit('auth_success', commitData)
            resolve(resp)
          })
          .catch((err) => {
            commit('auth_error')
            $cookies.remove('accessToken')
            $cookies.remove('refreshToken')
            $cookies.remove('user')

            reject(err)
          })
      })
    },

    logout({ commit }) {
      return new Promise((resolve, reject) => {
        commit('logout')
        $cookies.remove('accessToken')
        $cookies.remove('refreshToken')
        $cookies.remove('user')
        delete axios.defaults.headers.common['Authorization']
        resolve()
      })
    },
  },
  mutations: {
    auth_request(state) {
      state.status = 'loading'
    },
    auth_success(state, commitData) {
      state.status = 'success'
      state.accessToken = commitData.accessToken
      state.refreshToken = commitData.refreshToken
      state.user = commitData.user
    },
    auth_error(state) {
      state.status = 'error'
    },
    refresh_token(state, accessToken) {
      state.accessToken = accessToken
    },
    logout(state) {
      state.status = ''
      state.accessToken = ''
      state.refreshToken = ''
      state.user = ''
    },
  },
  getters: {
    isLoggedIn: (state) => {
      return !!state.accessToken
    },
    authStatus: (state) => state.status,
  },
})

在 main.js 中，我使用此函数进行检查：

router.beforeEach(async (to, from, next) => {

  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (store.getters.isLoggedIn) {
      next()
      return
    }

    next('/login')
  } else next()
})

问题是上面的代码只检查 Vuex 中是否存在访问令牌。我想在任何路由之前使用 api 进行验证，这需要身份验证，如果不成功，我想使用刷新令牌用 api 刷新它。如果两者都不成功（访问和刷新令牌都无效）用户将退出。

需要身份验证的示例路由：

path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
meta: {
  requiresAuth: true,
},

我试过这样的代码：

router.beforeEach(async (to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (store.state.accessToken) {
      await store.dispatch('verifyToken')

      if (store.getters.isLoggedIn) {
        next()
        return
      }
    }
    next('/login')
  } else next()
})

Vuex 中的操作：

verifyToken({ commit, state }) {
      const accessToken = state.accessToken
      const refreshToken = state.accessToken
      sessionSerivce
        .verifyToken(accessToken)
        .then((resp) => {})
        .catch((err) => {
          sessionSerivce
            .refreshToken(refreshToken)
            .then((resp) => {
              console.log('Refreshuje token')
              const accessToken = resp.data.access_token
              localStorage.setItem('accessToken', accessToken)
              axios.defaults.headers.common['Authorization'] = accessToken
              commit('refresh_token', accessToken)
            })
            .catch((err) => {
              commit('logout')
              localStorage.removeItem('accessToken')
              localStorage.removeItem('refreshToken')
              delete axios.defaults.headers.common['Authorization']
            })
        })
    },

请注意，在上面的代码中，我使用了 localstorage，但我改变了主意，我正在使用 cookie，正如您在之前的代码中看到的那样。

不幸的是，这段代码没有按预期工作 - if (store.getters.isLoggedIn) { next(); return; } 在 await store.dispatch('verifyToken') 结束之前开始执行，这很糟糕。

有什么想法吗？