Vue axios изменяет Auth заголовки с перехватчиком - PullRequest
Новая
       9

Vue axios изменяет Auth заголовки с перехватчиком

0 голосов
/ 04 сентября 2018

Я новичок в Vue и застрял на этой проблеме в течение некоторого времени. У меня есть метод входа в систему, который получает токен API и сохраняет его в localStorage. Вызов API входа в систему является единственным вызовом, который не отправляет заголовки Auth. После входа в систему каждый звонок должен добавлять токен API в заголовок.

При входе в систему перехватчик не устанавливает новый заголовок. Для работы требуется обновление страницы в браузере. Почему, что я делаю не так?

В моем компоненте Login у меня есть этот метод: 

methods: {
    login() {
        api.post('auth/login', {
            email: this.email,
            password: this.password
        })
        .then(response => {
            store.commit('LOGIN');
            localStorage.setItem('api_token', response.data.api_token);
        });
        this.$router.push('reservations') 
    }
}

Дополнительно у меня есть этот базовый экземпляр axios и перехватчик: 

export const api = axios.create({
    baseURL: 'http://backend.local/api/',
    // headers: {
    //  'Authorization': 'Bearer ' + localStorage.getItem('api_token')
    // },
    validateStatus: function (status) {
        if (status == 401) {
            router.push('/login');
        } else {
            return status;
        }
    }
});
api.interceptors.request.use((config) => {
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('api_token');
    return config;
}, (error) => {
    return Promise.reject(error);
});
...