如何在服务中访问 $auth.getToken('local') ？答案

【问题标题】：How can access $auth.getToken('local') in a service?如何在服务中访问 $auth.getToken('local') ？
【发布时间】：2020-01-27 12:43:47
【问题描述】：

我是 nuxtjs 的新手。我正在尝试创建类似 EventService.js 的服务。从 EventService.js 我想使用 axios 获取数据。但我想设置授权标头。但无法从 $auth.getToken('local') 获取访问令牌。我不想为每个 axios 请求设置授权标头。谢谢

import axios from 'axios'

 const apiClient = axios.create({
   baseURL: `example.com`,
   headers: {
   Accept: 'application/json',
   'Content-Type': 'application/json'
   'Authorization': "Bearer " +  **$auth.getToken('local')**
 }
})

export default {
   getEvents() {
     return apiClient.get('/events')
}

}

【问题讨论】：

了解 axios 的请求和响应拦截器。
@DigitalDrifter 现在 axios 的请求和响应拦截器解决了我的问题。谢谢

标签： vue.js vuex nuxt.js

【解决方案1】：

axios 拦截器解决了我的问题

apiClient.interceptors.request.use(
        (config) => {config.headers["Authorization"] =cookies.get("auth._token.local")
        .replace(/%/g, " ") 
   return config
   }, 
function(error) {
  return Promise.reject(error) })

【讨论】：

【解决方案2】：

您可以在 main.js（入口文件）中导入“axios”并添加以下内容：

import axios from 'axios'

axios.defaults.headers.common['Authorization'] = `Bearer ${localstorage.getItem('token')}`;

当您第一次设置令牌时，您可以在本地存储上设置它并再次分配给 axios 默认标头：

import axios from 'axios'

const token = <AUTH_TOKEN>
// when setting the token
localstorage.setItem('token', token)
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

这足以在您发出的每个 axios 请求中发送 Authorization 标头。

【讨论】：

我必须调用许多不同的端点意味着需要多个 axios 实例。现在拦截器解决了我的问题。