Vue, как правильно использовать JWT?

Question

[Константин]

Добрый день.

Может кто подсказать, как правильно использовать JWT?
Кто говорить через интерцептион, кто через Vuex.
Какой оптимальный вариант?

генерирую JWT в функции login

const token = jwt.sign({
                email: isUser.email,
                userId: isUser._id
            }, keys.jwt, {expiresIn: 3600})

            res.status(200).json({
                token: `Bearer ${token}`
            })

Как мне правильно сделать проверку на подлинность, может кто подсказать?
И как его правильно отправлять через Vuex или Header?

Comments

[alex]

токен храните в хранилище, дублируя его в localstorage или в куки. на клиенте все просто - если токен есть, значит юзер залогинен, если его нет - значит обратное. токен валидируйте не на клиенте, а на сервере, когда данные запрашиваете. если токен протух, отправляете 401, ловите этот 401 на клиенте, в том же интерцепторе например, и делаете разные вещи - перенаправляете на страницу логина, или запрашиваете новый токен, или ещё что нибудь. при логауте уделяете токен из хранилища и из Кук или локалсторадж. При инициализации приложения читаете куки или локалсторадж и если там есть токен пихаете его в хранилище.

[Константин]

Alex,
Спасибо за ответ.
А если есть в localstorage, зачем дублировать в Vuex?
C localstorage можно достучаться с любого места

[alex]

Константин, ну тут дело вкуса я думаю, мне вот например нравится когда токен лежит в сторе.

[Константин]

Alex, понятно, спасибо )
Во Vuex со храню,
а в header обязательно вставлять this.$http.defaults.headers['Authorization'] = localStorage.token || ''?
Если да, то перед вызовом axios?

this.$http.defaults.headers['Authorization'] = localStorage.token || ''
const res = await Vue.axios.post('/auth/login', user)

[alex]

Константин, ну вот у вас есть на сервере данные например. эти данные должны быть доступны только залогиненым юзерам. следовательно эти данные нужно защитить токеном. т.е. сервер отдаст эти данные только такому запросу, который предоставит валидный токен. теперь вопрос - как запросу доставить этот токен на сервер? можно в заголовках запроса:

this.$http.defaults.headers['Authorization'] = localStorage.token
this.$http.defaults.headers['Token'] = localStorage.token
this.$http.defaults.headers['X-My-Fucking-Token'] = localStorage.token
this.$http.defaults.headers['FUCK'] = `FUCKING ${localStorage.token}`

можно в теле запроса, если у вас какойнибудь post:

axios.post('/api/user', {
  data: {
    token: localStorage.token
  }
})

или можно в куках или еще как нибудь.

мысль уловили?

[alex]

Если да, то перед вызовом axios?

да как вам угодно. я например делаю так: написал обертку над axios, и при вызове передаю опцию signRequest: true/false. и на основании этой опции в интерцепторе запроса подписываю его токеном примерно так, грубый код:

// foo.js
function query(method, url, data, options) {
  return axios({
    method,
    data,
    options: {
      ...options
    }
  })
}

// bar.js
query('post', '/users', {
  name: 'Alex',
  age: 24,
  city: 'Moscow'
}, {
  signRequest: true
})

// baz.js
axios.interceptors.request.use(cfg => {
  if (cfg.signRequest) {
    cfg.headers['Token'] = store.state.token
  }
  
  return cfg
})

Vue, как правильно

нет каких-то 100% правильных техник. все техники которые описаны в большинстве тутриолов просто подходят под большинство случаев. но конечная реализация всегда зависит от проекта

[Константин]

Что я много всего перечитал запутался как правильней сделать )
Это я перед запросом отправляю
this.$http.defaults.headers['Authorization'] = localStorage.token
а затем axios?

[alex]

Константин, да, затем axios

[Константин]

Alex, спасибо
а Interceptors, где должен быть расположен (в хуках или еще где-то), чтобы перехватывал запрос?

axios.interceptors.request.use(cfg => {
  if (cfg.signRequest) {
    cfg.headers['Token'] = store.state.token
  }
  
  return cfg
})

[Константин]

и еще если я использую interceptors,
то headersне нужно использовать?
this.$http.defaults.headers['Authorization'] = localStorage.token

[alex]

Константин, можно в отдельном файле:

// api.service.js
import axios from 'axios'

const instance = axios.create()

instance.interceptors
instance.interceptors
instance.interceptors

export default instance

[Константин]

Спасибо, попробую по разбираться

[Константин]

Его достаточно прописать в main.js

axios.interceptors.request.use(cfg => {
  if (cfg.signRequest) {
    cfg.headers['Token'] = store.state.token
  }
  
  return cfg
})

Или нужно в каждом файле подключать?

[Константин]

Все разобрался в main.js поставил
Спасибо

Answer 1

[Константин]

Подскажите, как правильно проверить токен на время жизни?