Первый вызов API после входа в систему не разрешен до перезагрузки страницы (Laravel Sanctum

#laravel #vue.js #axios

Вопрос:

Я пытаюсь решить эту проблему 401 в течение некоторого времени. После входа в систему и получения токена я устанавливаю его в качестве заголовка, но продолжаю получать исключение 401 при первой загрузке страницы. Ошибка исчезает после обновления. Похоже, что токен не записывается для хранения или локального хранения в первый раз. Вот мой код для входа в систему (я установил токен в состояние.токен в мутации):

 retrieveToken(context, credentials) {
    return new Promise((resolve, reject) => {
      axios.post('api/login', {
        email: credentials.email,
        password: credentials.password,

      })
        .then(response => {
          const token = response.data.access_token
          localStorage.setItem('access_token', token)
          context.commit('RETRIEVE_TOKEN', token)
          resolve(response)
          console.log(response.data)
        })
        .catch(error => {
          console.log(error)
          reject(error)
        })
    })
  },

И вот как я установил его в заголовок (установка его из localStorage не решает проблему):

 const authorizedApiClient = axios.create({
  baseURL: process.env.VUE_APP_PRODUCTION_URL,
  
  headers: {
    Accept: 'application/json',
    'Authorization': `Bearer ${store.getters.token}`
  }   
})

Такое поведение сбивает меня с толку. Есть ли какая-либо теория или предложения о том, как отлаживать?

1. Похоже, что запрос аутентифицируется с помощью файла cookie сеанса, а не токена на предъявителя. Я бы посмотрел, как Sanctum определяет приоритет файлов cookie над токенами, если это один и тот же домен.

2. Спасибо за предложение. Однако, когда я удаляю токен, я возвращаюсь в статус неавторизованного. И я вообще ничего не делаю с печеньем.

Ответ №1:

Я предполагаю, что при создании клиента axios токен еще не извлекается из api. Попробуйте установить заголовок перед каждым запросом с помощью перехватчика:

 const authorizedApiClient = axios.create({
  baseURL: process.env.VUE_APP_PRODUCTION_URL,
  
  headers: {
    Accept: 'application/json'
  }   
})

authorizedApiClient.interceptors.request.use((config) => {
  if (store.getters.token){ // or get it from localStorage
    config.headers["Authorization"] = "Bearer "   store.getters.token
  }
  return config
})