Javascript 使用Vue路由器和Vuex验证并刷新中的JWT访问令牌

我已经使用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；}

在

wait store.dispatch（'verifyToken'）

结束之前开始执行，这是错误的

---

有什么想法吗？

两次意外地将访问令牌声明为刷新令牌。您如何看待示例中的autorefresh：或首先检查服务器响应：？