登录后设置不记名令牌

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

如果在文件开头设置了令牌变量，则它采用原始值。 因此，您的用户令牌不是反应性的，它没有从本地存储中获取新值。 我用我的应用程序做了这个来解决我遇到的同样的问题

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')
    },
})