¿Dónde puedo poner el token del encabezado de autorización en axios después de enviar la acción de inicio de sesión con la autenticación de pasaporte laravel en un proyecto vue.js separado? Intenté configurarlo en main.js de esta manera y no funciona correctamente. Después del envío, en el componente QuestionIndex, la llamada axios no tiene el encabezado de autorización automáticamente. Y al actualizar la página, tiene el encabezado de autorización. Puedo solucionar esto colocando el encabezado del token en el componente QuestionIndex. Pero no creo que esta sea una forma adecuada de hacerlo. Por favor ayúdame con este problema. En main.js

 const token = localStorage.getItem('access_token'); if (token) { axios.defaults.headers.common['Authorization'] = 'Bearer ' + token; }

En inicio de sesión.vue

 login(){ this.$store .dispatch("login", this.form) .then(() => { this.$router.push({ name: "QuestionIndex" }); }) .catch(err => { console.log(err); }); }

En la tienda vuex

 state: { token: localStorage.getItem('access_token') || null, user: {}, }, mutations: { setToken(state, data) { state.token = data.token; state.user = data.user; }, }, actions: { login({ commit }, credentials) { return axios.post("http://127.0.0.1:8000/api/login", credentials).then(( res ) => { localStorage.setItem('access_token', res.data.data.token); commit("setToken", res.data.data); }); }, }, getters: { token: (state) => state.token, }