Как организовать работу с jwt во VUEX?

Question

[xcuube]

Здравствуйте, как правильнее будет организовать работу сайта с restful api?

Есть api, при авторизации на сайте на клиент передается jwt и записывается в localstorage, после этот токен отправляется в каждом запросе к api, и, если он валидный, сервер возвращает данные, а если невалидный/время действия закончилось, на клиент возвращается соответствующий признак и клиент удаляет из localstorage jwt и переадресовывается на /login

Вопрос такой. Нормально ли это, что в каждом запросе проверяется прислал ли сервер признак невалидности/окончания действия токена, или есть какие-то более разумные варианты?

Comments

[Игорь]

Недавно решал подобную задачу, не уверен по поводу её ровного исполнения, но смысл следующий.

Я использую Nuxt те же яйца только с боку.

./middleware/check-auth.js

import {Secure} from "../api/Secure";
import {ACCESS_TOKEN} from "../store/mutation-types";

export default async function ({store, req, redirect}) {

  let auth = await checkAccessToken(store.getters[ACCESS_TOKEN])
  if (!auth) {
    return redirect('/login')
  }
};


async function checkAccessToken(token) {
  let secure = new Secure()
  try {
    let response = await secure.checkToken({token})

    return response.code === 0;

  } catch (e) {
    return false
  } finally {
    secure = undefined
  }
}

У меня есть api метод https://api.mydomain.com/secure.checkToken
в Nuxt я сделал так:

import axios, {AxiosRequestConfig} from "axios";


export class Api {

  _api(method){
    return `${process.env.api}/${method}`;
  }

  /**
   *
   * @param method
   * @param config
   * @returns {Promise<AxiosResponse<T>>}
   */
  _httpGet(method, config) {
    return axios.get(this._api(method), config);
  }

  /**
   *
   * @param method
   * @param data
   * @param config
   * @returns {Promise<AxiosResponse<T>>}
   */
  _httpPost(method, data, config) {
    return axios.post(this._api(method), data, config);
  }
}

import {Api} from "./Api";

export class Secure extends Api {


  /**
   * @returns {Promise<T>}
   * @param raw_json
   */
  async getAccessToken(raw_json) {
    let response = await this._httpPost("secure.getAccessToken", raw_json);
    return response.data;
  }


  /**
   *
   * @param raw_json
   * @returns {Promise<T>}
   */
  async checkToken(raw_json) {
    let response = await this._httpPost("secure.checkToken", raw_json);
    return response.data;
  }

}

При каждой смене роутинга, мне приходится ходить на сервер и чекать JWT

Answer 1

[Владислав]

Это тема легко гуглится и уже много раз была описана, вот например https://blog.sqreen.com/authentication-best-practi...

Проверяется перехватчиком на ответы, в перехватчике смотрим код в ответа, если апи присылает 401 например, значит токен не валидный и нужно отправить пользователя на авторизацию

Comments

[xcuube]

Спасибо