Question

我找到了使用NuxtJS中的Authenticated全局配置Axios的方法 - VueJS（我主要使用NUXTJS）。

我只需要：如果用户登录并在$ store中有令牌，axios将获得此令牌。如果用户是匿名的，axios将不会获得此令牌

〜/插件/ Axios公司

import axios from 'axios'
import AuthenticationStore from '~/store'

var api = axios.create({
  baseURL: 'http://localhost:8000/api/v1/',
  'headers': {'Authorization': 'JWT ' + AuthenticationStore.state.token}
})

api.interceptors.request.use(function (config) {
  config.headers = {
    'Authorization': AuthenticationStore.state.token ? 'JWT ' + AuthenticationStore.state.token : ''
  }
  return config
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})

export default api

〜/商店/ index.js

const AuthenticationStore = () => {
  return new Vuex.Store({
    state: {
      token: null
    },
    mutations: {
      SET_TOKEN: function (state, token) {
        state.token = token
        instance.defaults.headers = { Authorization: 'Bearer ' + token }
      }
    },
    actions: {
      ....
    }
  })
}

export default AuthenticationStore

错误：[nuxt] Error while initializing app TypeError: Cannot read property 'token' of undefined

Answer 1

我建议使用拦截器，它更灵活，在创建请求时获取令牌。尝试类似的东西，以避免未设置令牌的问题。

// ~/plugins/axios
import axios from 'axios'
import AuthenticationStore from '~/store'

var api = axios.create({
  baseURL: 'http://localhost:8000/api/v1/',
  'headers': {'Authorization': 'JWT ' + AuthenticationStore.state.token}
})
 api.interceptors.request.use(function (config) {
  config.headers = {
    'Authorization': AuthenticationStore.state.token ? 'Bearer ' + AuthenticationStore.state.token : ''
  }
  return config
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})
export default api

如果您不需要auth标头，则需要在拦截器的乞讨时添加。

您商店的问题： 你应该在导出商店实例时导出功能，所以这是错的：

const AuthenticationStore = () => {

您应该导出实例：

const AuthenticationStore = new Vuex.Store({ ...

请访问https://vuex.vuejs.org/guide/以获得更好的理解。你完全不了解它也不错！ JS中的模块/实例/导出并不是很容易理解。试着去学习更多。祝你好运。

使用NuxtJS中的Authenticated全局配置Axios - VueJS

1 个答案: