Как настроить отправку токена в заголовках с использованием Nuxt?

Question

Левон

nuxtjs

Как настроить отправку токена в заголовках с использованием Nuxt?

Как в Nuxt передать StoreID и Token в заголовках при запросе? Нашел вариант с использованием runtime, но у меня возникает ошибка с синтаксисом. Прошу объяснить, почему это происходит. Исходное задание можно найти здесь: https://github.com/Ecwid/new-job/blob/master/TypeS...

3 октября 2023 г. 7:27

Ответы на вопрос 1

Похожие вопросы

Answer 1

В Nuxt.js вы можете настроить отправку токена в заголовках запроса с использованием middleware и axios.

Для начала установите пакет axios:

```bash
npm install axios
```

Затем создайте файл middleware/auth.js со следующим содержимым:

```javascript
export default function ({ store, route, redirect, $axios }) {
  // Проверка на наличие токена в хранилище
  const token = store.state.token
  if (token) {
    // Установка токена в заголовки запроса
    $axios.setHeader('Authorization', `Bearer ${token}`)
  }
}
```

Затем добавьте middleware к глобальным middleware в Nuxt.config.js:

```javascript
export default {
  // ...
  router: {
    middleware: 'auth'
  }
  // ...
}
```

Теперь вы можете использовать axios с автоматически установленным токеном в заголовках запроса.

Относительно передачи StoreID и Token в заголовках запроса, вы можете использовать middleware для доступа к данным из глобального хранилища. 

```javascript
export default function ({ store, route, redirect, $axios }) {
  const storeId = store.state.storeId
  const token = store.state.token

  if (storeId && token) {
    $axios.setHeader('StoreID', storeId)
    $axios.setHeader('Authorization', `Bearer ${token}`)
  }
}
```

При выполнении запроса, заголовки `StoreID` и `Authorization` будут автоматически добавлены.