vuex에서 로그인 작업 후 Axios 요청에 헤더 토큰 추가

vuex에서 로그인 작업 후 Axios 요청에 헤더 토큰 추가

laravel pasport로 로그인 시스템을 구축한 후 anxios 요청에 헤더 토큰을 추가하고 싶지만 anxios.defaults.headers.common["권한 부여"]="Barearnull" 아무 도움이나!!!내가 뭘 잘못하고 있는 거지?이 코드는 ProjectEmpert에 있다.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
}

여러 구성 요소에서 서로 다른 공리 인스턴스를 가져오는 경우한 개만 수입해서 꼭 붙어야 한다.전 세계적으로 사용하는 것이 좋다.데모:

// 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");

그런 다음 다른 스크립트에서 사용하려는 경우 없이 액세스하십시오.import다음 중 하나를 선택하십시오.

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

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

참조URL: https://stackoverflow.com/questions/60657083/add-header-token-to-axios-requests-after-login-action-in-vuex