令牌授权 header 护照在 vue.js

Question

在分离的 vue.js 项目中使用 laravel 护照身份验证发送登录操作后，我可以将授权 header 令牌放在 axios 中的什么位置？我尝试将其设置为 main.js 像这样并且不能正常工作。调度后，在 QuestionIndex 组件中，axios 调用不会自动获得授权 header。并且通过刷新页面，获得了授权header。我可以通过将令牌 header 放在 QuestionIndex 组件中来解决这个问题。但我认为这不是正确的方法。请帮我解决这个问题。在main.js

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

在login.vue

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

在 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,
    
    }

Answer 1

您可以在初始化 axios 实例后设置授权 header，如下所示：

axiosInstance.interceptors.request.use((config) => {
  const token = localStorage.getItem('access_token');
  config.headers.Authorization = `Bearer ${token}`

  return config
})

在您的 VUEX 操作中，确保使用您在 main.js（或任何地方）中创建的 axiosInstance。如果你像这样 import axios from 'axios' 只是在你的 VUEX 商店中导入 axios 它不会工作，因为它不是你设置 header 的 axios 实例。

Answer 2

你可以试试这个

axios.post("http://127.0.0.1:8000/api/login", credentials, { headers: { Authorization: 'Bearer ' + localStorage.getItem('access_token') } })

令牌授权 header 护照在 vue.js

Token Authorization header with passport in vue.js

javascript

authorization

header

laravel

vue.js