在 vuex 中登录操作后向 axios 请求添加标头令牌

Posted 2023-03-14

【中文标题】在 vuex 中登录操作后向 axios 请求添加标头令牌

【英文标题】：Add header token to axios requests after login action in vuex

【发布时间】：2020-06-24 16:18:51

【问题描述】：

在使用 laravel 护照构建登录系统后，我想将标头令牌添加到 axios 请求 但是 axios.defaults.headers.common["Authorization"]= "Barearnull" 任何帮助！！！我究竟做错了什么？ 这是 ProjectEmploye.vue 中的代码：

created()
  axios.defaults.headers.common["Authorization"] = "Bearer" + 
   localStorage.getItem("member_token");
  this.$store.dispatch('currentUser/getUser');
 
computed:
  currentUser:
        get()
return    this.$store.dispatch('currentUser/getUser');
  
  

 ,

这是 CurrentUser.js：

import axios from "axios";

 const state =
 user:

 

 ;
 const getters= ;
  const actions = 
 getUser()
    axios.post("api/userauth")
    .then(response=>
  commit('setUser',response.data);
    );
 ,
loginUser(,user)
   axios.post("/api/login",
       email: user.email,

       password: user.password
   )
   .then(response=>
       console.log(response.data);
      if( response.data.acces_token)
           //save token mte3na fi locoal storage
           localStorage.setItem(
               "membre_token",
               response.data.acces_token
           )

           window.location.replace("/home");
       

   )
   
;
const mutations=
setUser(state,data)
    state.user=data;

;

export default
namespaced:true,
 state,
 getters,
 actions,
mutations

【参考方案1】：

您正在不同组件中导入不同的 axios 实例。您应该导入一个并坚持下去。更好地在全球范围内使用它。这是一个演示：

// in your root app.js file

// import axios
window.axios = require('axios')

// then set it up; you can also set it when component is mounted within mounted()  ...  
axios.defaults.headers.common["Authorization"] = "Bearer " + localStorage.getItem("member_token");

然后，当您想在另一个脚本中使用它时，无需importing 即可访问它：

// in any other component, child of app.js

axios.post("/api/login", 
    email: user.email,
    password: user.password
)

【讨论】：

"Bearer" + localStorage.getItem("member_token"); 中间最好加个空格。