Question

我在商店中有一个令牌，但我无法在我的 axios 插件中访问它。我曾经在只使用 Vue 时简单地导入商店，真的很难理解如何在 Nuxt.js 中做到这一点

我需要从我的商店访问令牌值，并在下面的“授权”属性中使用它。

这是我当前的代码；

// /plugins/axios.js
import axios from 'axios'
import { state } from '../store'

export default () => {
    const api = axios.create({
        baseURL: process.env.BASE_URL,
        headers: {
            Authorization: `Bearer` + xxxx ACCESS STORE STATE HERE xxxx,
        },
    })

    return api
}

// nuxt.config.js
...
{
  plugins: ['~/plugins/persistedState.client.js', '~/plugins/axios'],
}
...

// store/index.js
export const state = () => ({
    token: null,
    user: null,
    isUserLoggedIn: false,
})

当 state 作为函数从我的 store/index.js 返回时，我无法让它工作，显然这不是解决方案！

我的尝试

查看文档和旧帖子，看起来我需要将 { store } 作为参数传递，但我收到错误 Cannot destructure property 'store' of 'undefined' as it is undefined.

例如...

export default ({ store }) => {
    const api = axios.create({
        baseURL: process.env.BASE_URL,
        headers: {
            Authorization: `Bearer` + store.state.token,
        },
    })

    return api
}

我还尝试在商店本身中设置授权标头作为替代方案，但这在发布到我的服务器时没有任何影响，没有提供授权标头。

// store/index.js
...
export const mutations = {
    setToken(state, token) {
        state.token = token
        state.isUserLoggedIn = !!token
        this.$axios.setHeader('Authorization', '123')
    },

对此有一点损失，任何帮助将不胜感激。

Answer 1

插件函数应该是纯函数，不应使用 $this（粗箭头）重新分配 => 的值。

您可以利用当前的 $axios 实例并在发出请求时设置标头：

// plugins/axios.js
export default function ({ $axios, store }) {
  $axios.onRequest(config => {
    const { token } = store.state

    if (token) {
      config.headers.common.Authorization = `Bearer ${token}`
    }

  })
}

请注意，$axios 是由 @nuxtjs/axios 提供的软件包，如果您手动注册了 this.$axios，this.axios 将与 axios 不同。

Nuxt.js - 在 axios 插件中访问商店状态

这是我当前的代码；

我的尝试

1 个答案: