Установить токен на предъявителя после входа

Question

Я установил базовый сервис, используя axois, и установил в нем токен-носитель, но когда он вызывает API пользователя, я получаю неавторизованный доступ из-за токена null, но я уже установил токен в локальном хранилище

База

import axios from "axios";

const baseURL = process.env.VUE_APP_BASE_API;
const token = localStorage.getItem('usertoken');
export default axios.create({
    baseURL,
    headers: {
        'Content-Type' : 'application/json',
        Authorization  : 'Bearer '+token
    },
})

В login.vue

 let res = await loginService.checkLogin(usrname,password)
 this.loader = false
 localStorage.setItem('usertoken',res.data.data.token)

Для пользователя

import baseService from "./baseService";

export default {
    fetchUsers(){
        return baseService.post( `${'user/get-all-users'}`,{
            limit:1000
        }).then(function(response){
            return response
        }).catch(function(error){
            return error.response
        })
    },

Answer 1

export default axios.create({
    baseURL,
    headers: {
        'Content-Type' : 'application/json',
        'Authorization'  : 'Bearer '+token
    },
})

Использование 'Authorization'.

Или вы также можете использовать

axios.defaults.headers.common['Authorization'] = 'Bearer '+token;

Answer 2

Если переменная токена установлена ​​в начале файла, она принимает исходное значение. В результате ваш пользовательский токен не является реактивным, он не получает новое значение из localalstorage. Я сделал это с моим приложением, чтобы исправить ту же проблему, с которой я столкнулся

import axios from "axios";

const baseURL = process.env.VUE_APP_BASE_API;

export default axios.create({
    baseURL,
    headers: {
        'Content-Type' : 'application/json',
        Authorization  : 'Bearer '+localStorage.getItem('usertoken')
    },
})