如何在页面重新加载期间保留 class 个 javascript sdk 实例

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 的方法。但是由于每个端点调用都需要一个令牌，因此当我丢失令牌（从页面刷新）时，我无法使用 class 方法。我的做法是否正确？

最终目标是拥有一个与我的后端交互的 sdk 层 api，而前端只需要使用这个 sdk 并使用它的方法，抽象出端点。我正在通过电子邮件身份验证检索 jwt 令牌，然后将此令牌保存到 mySDK 实例上的一个变量中。我也试过将此令牌保存到 localStorage，但我读过它不太安全。

我见过像 dropbox 这样的 sdk，它们在一个地方实例化它，并在一个文件中使用它的方法。但是，如果我需要在 React 或 Vue 应用程序的不同组件中使用 class 方法怎么办？

Answer 1

您可以将令牌保存在 localStorage 或您选择的持久性存储中。将令牌保存在存储或 cookie 中是保留身份验证的唯一方法，因为所有 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;

clientsingleton.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'));

main.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

如何在页面重新加载期间保留 class 个 javascript sdk 实例

How to preserve class instance of a javascript sdk during page reload

javascript

sdk

reactjs

vue.js