Question

管理信息中心设置：

// React modules
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { browserHistory } from 'react-router';

import { progressDone } from 'utils/nprogress-func';

// Admin Header section
import AdminHeader from '../admin-header/admin-header';


// Admin dashboard styling
import './styles/admin-dashboard';

class AdminDashboard extends Component {

  componentDidMount() {
    progressDone();
  }

  componentDidUpdate() {
    if(!localStorage.getItem('admin_log_toks')) {
        browserHistory.push('/admin-login');
    }
  }

  render() {
    if(this.props.isAuthenticated) {
      return (
        <div className="admin-dashboard">

          {/* admin-bg class has been styled in main.scss */}
          <div className="admin-bg"></div>

          <AdminHeader />

          <main>
            <div className="admin-content-wrapper">
              {this.props.children}
            </div>
          </main>
        </div>
      );
    } else {
      browserHistory.push('/admin-login');
      return (
        <div></div>
      );
    }
  }
}

// These props come from the application's
// state when it is started
function mapStateToProps(state) {

  const { authAdmin } = state;
  const { isAuthenticated } = authAdmin;

  return {
    isAuthenticated
  };
}

export default connect(mapStateToProps)(AdminDashboard);

我有一个带导航菜单的管理信息中心。

<AdminHeader />包含路由到各个管理部分并使用AdminDashboards {this.props.children}加载的菜单。

我通过登录表单到达管理仪表板，并调度一个动作，将变量isAuthenticated设置为true。然后，在成功登录时，通过reducer将isAuthenticated提供给所有组件。 isAuthenticated是根据从服务器收到的令牌设置的，然后令牌存储在浏览器的localStorage中。

但是，我还想检查一下如果用户从localStorage中删除令牌会发生什么。

我已经设置了

funtion auth (state = {
  isAuthenticated: localStorage.getItem('token') ? true : false
})

现在，如果用户手动删除localStorage，则在刷新时，用户将被发送回登录屏幕。但是，我正在开发一个单页应用程序，我想确认每当用户路由到另一个路由/网址而不刷新，那么localStorage中的令牌仍然存在。

因此，我写了这段代码：

componentWillReceiveProps() {
  if(!localStorage.getItem('admin_log_toks')) {
    browserHistory.push('/admin-login');
  }
}

但是，我收到错误未捕获的不变违规：在未安装的组件上调用了findDOMNode。

所以我把它改成了：

componentWillUpdate() {
  if(!localStorage.getItem('admin_log_toks')) {
    browserHistory.push('/admin-login');
  }
}

我仍然得到同样的错误。所以，我将上面的代码更改为：

componentWillUpdate() {
  if(!localStorage.getItem('admin_log_toks')) {
    setTimeout(function() {
      browserHistory.push('/admin-login');
    }, 10);
  }
}

一切正常但由于某种原因我不认为这是正确的方法。

我首先尝试解决路线变化问题：

browserHistory.listen(location => {
  if(!localStorage.getItem('admin_log_toks')) {
    browserHistory.push('/admin-login');
  }
})

但是只听一次路线改变就听了两次或三次。

以上代码是否正确，还是有更好的解决方法？基本上，如果有人手动从localStorage中删除令牌，我只想路由登录。

我使用的是最新版本的React，React路由器，Redux和React redux。

感谢您的期待。

未捕获的不变违规：在未安装的组件上调用了findDOMNode

0 个答案: