Заголовок Axios глобально не работает после входа в Vue 3

#javascript #vue.js #axios

#JavaScript #vue.js #axios

Вопрос:

у меня проблема с входом в axios с помощью Vue 3.

После успешного входа в API access и авторизации я помещаю router.push для перенаправления страницы на панель мониторинга, код, подобный этому:

             axios.post('auth/signin', {
                username: username,
                password: password
            }).then((response) => {
                localStorage.setItem('accessToken', response.data.accessToken)
                localStorage.setItem('refreshToken', response.data.refreshToken)

                toast.success("Login sukses")

                if(VueJwtDecode.decode(localStorage.getItem('accessToken')).sub == "admin"){
                    router.push({name: 'admin.dashboard.index'})
                }else if(VueJwtDecode.decode(localStorage.getItem('accessToken')).sub == "user"){
                    router.push({name: 'user.dashboard.index'})
                }else if(VueJwtDecode.decode(localStorage.getItem('accessToken')).sub == "company"){
                    router.push({name: 'company.dashboard.index'})
                }
            }).catch(error => {
                toast.error(error.response.data.error.message);
            })

Он успешно перенаправляет пользователя на панель мониторинга, но заголовок axios не работает, я должен обновить (f5) страницу браузера, чтобы запустить функцию запуска заголовка axios.

хотя я уже добавил

 axios.defaults.headers['x-access-token'] = localStorage.getItem('accessToken')

строка в main.js

Как это исправить? Спасибо раньше.

1. Почему бы не добавить axios.defaults.headers['x-access-token'] = response.data.accessToken сразу после входа в систему?

2. Он работает только один раз, после обновления браузера, он не будет работать

3. Я не предлагаю удалять запись из main.js

4. хорошо, теперь это работает. Я не удаляю запись из основного js, а также добавляю ее после входа в систему. Спасибо

Ответ №1:

main.js будет компилироваться только при первой загрузке, поэтому вам следует отредактировать свой axios заголовок при поступлении нового токена доступа