0

管理员仪表板设置：

// 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 的操作。isAuthenticated 然后在成功登录时通过 reducer 对所有组件可用。isAuthenticated 是根据从服务器接收到的令牌设置的，然后将令牌存储在浏览器的 localStorage 中。

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

我已经设置

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

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

因此，我写了这段代码：

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

但是，我收到错误Uncaught Invariant Violation: findDOMNode was called on an unmounted component。

所以我把它改成：

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');
  }
})

但是，只需更改一次路线，listen 就会触发两次或三次。

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

我正在使用最新版本的 React、React 路由器、Redux 和 React redux。

感谢期待。

4

0 回答 0