Как сохранить экземпляр класса sdk javascript во время перезагрузки страницы

Question

Я создал уровень Javascript SDK, который взаимодействует с моим внутренним API.

Во внешнем интерфейсе я создаю экземпляр указанного sdk следующим образом:

// my-sdk-js.js
class MySDK() {
  constructor() {
    this.accessToken = null;
  }
  authenticate(payload) {
    const { email, tripid } = payload;
    // fetch token from backend using email + tripid => response
    this.accessToken = response.token
  }
  getData() {
    // fetch data from backend using this.accessToken => response
    return response.data; // array of data
  }
  ...
}

import mySDK from 'my-sdk-js';

const mySdk = new mySDK();
mySDk.authenticate({
  email: 'myemail@gmail.com',
  tripid: '1234567890'
}) // internally fetches jwt token and saves it as a variable to that instance of mySDK
mySDK.getData().then(response => console.log(response.data)) // array of data

Однако представьте, что я сохраните этот SDK в глобальном управлении состоянием (redux / vuex), я могу передать этот экземпляр любому компоненту, который мне нравится. Затем в компоненте я могу вызвать методы этого SDK. Но поскольку для каждого вызова конечной точки требуется токен, я не могу использовать методы класса, когда теряю токен (со страницы refre sh). Правильно ли я подхожу к этому?

Конечная цель состоит в том, чтобы иметь уровень SDK, который взаимодействует с моим backend api, а интерфейс просто должен потреблять этот SDK и использовать его методы, абстрагируя конечные точки. Я получаю токен jwt через аутентификацию по электронной почте, а затем сохраняю этот токен в переменной этого экземпляра mySDK. Я также пробовал сохранить этот токен в localStorage, но я прочитал, что он не так безопасен.

Я видел SDK, например dropbox, где они создают его экземпляр в одном месте, а также используют его методы в одном файле. Но что, если мне нужно использовать методы класса в разных компонентах в приложении react или vue?

Answer 1

Вы можете сохранить свой токен в localStorage или в постоянном хранилище по вашему выбору. Сохранение токена в хранилище или повар ie - единственный способ сохранить вашу аутентификацию, поскольку все ссылки на javascript экземпляры уничтожаются при перезагрузке страницы. Как уже упоминалось, он уязвим для XSS (например, вредоносного кода из CDN), но вы должны следить за своими импортированными зависимостями.

// sdk file
class mySDK {
  constructor(token) {
    // pass token from vuex/redux
    this.accessToken = token;
  }
  authenticate(payload) {
    const { email, tripid } = payload;
    // fetch token from backend using email + tripid => response
    this.accessToken = response.token;
    // save returned token in vuex/redux
    return this.accessToken;
  }
  getData() {
    // fetch data from backend using this.accessToken => response
    return response.data; // array of data
  }
}

export default mySDK;

clientingleton. js

// clientsingleton.js helper file
import mySDK from 'my-sdk-js';

// use localstorage oder statemanagement of your choice
export default new mySDK(localStorage.getItem('SAVED_TOKEN'));

основной. js

// in main.js file
import mySDK from './clientsingleton.js';

mySDK
  .authenticate({
    email: 'myemail@gmail.com',
    tripid: '1234567890',
  })
  .then((token) => localStorage.setItem('SAVED_TOKEN', token)); // internally fetches jwt token and saves it as a   variable to that instance of mySDK

каждый второй файл

// in every other file where you need to use your sdk
import mySDK from './clientsingleton.js';

mySDK.getData().then((response) => console.log(response.data)); // array of data