Question

我有一个javascript模块，我想从vuex商店获取auth密钥

这是我的代码，似乎可以正常工作

import store from '../../../store';

class ExternalApi {
  constructor() {
    const that = this;
    that.configuration = { apiKey: '', basePath: '/api/v2' };

    that.authorizationHeader = function authorizationHeader() {
      const cstore = store;
      if (cstore && cstore.state && cstore.state.accessToken) {
        that.configuration.apiKey = cstore.state.accessToken;
      }
      const localVarHeaderParams = { };
      localVarHeaderParams.authorization = `Bearer ${that.configuration.apiKey}`;

      return localVarHeaderParams;
    };
    this.list = function list(params) {
      const localVarPath = `${that.configuration.basePath}/list`;
      const localVarHeaderParams = that.authorizationHeader();
      return axios....
    };
}

我想知道两件事：

这是通过javascript连接存储的方式还是有更好的方法
此代码是否会使我遇到一些证券问题。

Answer 1

回答第一个问题，当您想从Vue外部使用商店时，只需使用它的API，尽管您实际上并不需要检查商店或要初始化的状态。

关于安全性，将授权令牌存储在JS中将很容易受到XSS攻击，避免（或减轻）它们的最佳方法是实施可靠的Content Security Policy (CSP)并使用较低的（5-10分钟）为令牌而活的时间。

请注意，您无需将store重命名为cstore，并且如果您使用class methods而不是在构造函数中添加函数属性，则无需使用{ {1}}。还要注意，将令牌存储在内存中将无法在页面刷新后继续存在，因此您可能希望将其存储在this中。

从javascript模块访问Vuex存储

1 个答案: