登錄后設置不記名令牌

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