如何使用 Vuex 和 Axios 拦截器在 Vue 2 中实现基于令牌的验证

2024-03-11 09:25:06

使用 Vuex 和 Axios 拦截器在 Vue 2 中实现基于令牌的验证

在构建基于令牌的应用程序时，使用身份验证令牌验证请求至关重要。在 Vue 2 中，Vuex 状态管理和 Axios HTTP 拦截器可以完美地解决这一需求。然而，在独立文件中使用 Vuex 状态和注入 Axios 拦截器可能会遇到挑战。本指南将深入探讨这些挑战及其解决方案，帮助您在 Vue 2 中高效实施基于令牌的验证。

在单独的文件中使用 Vuex 状态

Vuex 状态通常仅在 Vue 组件内可用。要解决在独立文件中使用 Vuex 状态的问题，您可以使用以下方法：

// 单独的文件
import { store } from '@/store'
const token = store.state.token

注入 Axios 拦截器

要注入 Axios 拦截器，您需要在应用程序启动时执行以下操作：

// main.js
import { createHttpInterceptor } from './http-interceptor'

createHttpInterceptor() // 注入拦截器

修复拦截器中无法访问 Vuex 状态的错误

如果您在拦截器中遇到无法访问 Vuex 状态的错误，请尝试将拦截器修改为以下形式：

import { store } from '@/store'

export default function createHttpInterceptor() {
  axios.interceptors.request.use(
    (config) => {
      const token = store.state.token
      if (token) config.headers.Authorization = `Bearer ${token}`
      return config
    },
    (err) => Promise.reject(err)
  )
}