Question

我有index.js文件，这是我的react应用程序的起点。我在索引文件中导入Login.js和Full.js文件。这是我的index.s文件

import Login from './views/Login/Login';
import Full from './containers/Full/';

ReactDOM.render((<Provider store={store}>
  <HashRouter>
    <Switch>
     <Route exact path="/" name="Login Page" component={Login}/>
     <Route path="/login/:AUTHKEY" name="Login" component={Login}/>
     <Route path="/" name="Home" component={Full}/>
   </Switch>
  </HashRouter>
</Provider>
),document.getElementById('root'));

在我的Login.js页面中，我收到URL中的身份验证密钥。例如http://localhost:8080/#/login/123456

我正在将此authkey存储在本地存储中。

我有一个在Full.js文件中导入的常量文件，该常量文件对于所有路由组件都是通用的。我正在将此本地存储authkey传递给Constant文件。然后，我在API调用中使用Constant.js文件中的authkey。

这是我的Constant.js文件（在Full.js页面中导入）

let authkey = localStorage.getItem("AUTHKEY");
export default {
  AXIOSCONFIG:{
   headers: {
       'Content-Type': 'application/json;charset=UTF-8',
       'authKey':authkey
   }
  }
}

问题是导入Login和Full是异步的，因此当加载Login页面时，还将加载Full.js组件，然后Constant.js文件将authkey显示为null（因为尚未设置localStorage中的authkey）。我试图实现的是仅在authkey设置为localStorage时才导入Full.js组件（这在Login.js页面中发生）

Answer 1

您不能延迟导入。解决方案是在设置localStorage项目后的正确时间点加载authkey：

var authkey;

export default {
  AXIOSCONFIG: {
    init: function() {
      authkey = localStorage.getItem("AUTHKEY");
    },
    headers: {
      'Content-Type': 'application/json;charset=UTF-8',
      'authKey': authkey
    }
  }
}

在其他地方，请在发出请求之前运行Constant.AXIOSCONFIG.init();。您也可以将headers转换成一个加载authkey，然后返回标题的函数。

Answer 2

您可以为Full组件的渲染添加条件。

HTTP/1.1 401 Unauthorized
Content-Type: application/json; charset=utf-8
Docker-Distribution-Api-Version: registry/2.0
Www-Authenticate: Bearer realm="https://auth.docker.io/token",service="registry.docker.io",scope="repository:library/ubuntu:pull",error="insufficient_scope"
Date: Wed, 20 Jun 2018 08:02:24 GMT
Content-Length: 157
Strict-Transport-Security: max-age=31536000

{"errors":[{"code":"UNAUTHORIZED","message":"authentication required","detail":[{"Type":"repository","Class":"","Name":"library/ubuntu","Action":"pull"}]}]}

仅当加载了先前的组件时才对js导入组件做出反应

2 个答案: