Question

我正在尝试自定义管理员视图页面，并且确实有一个关于该行为的问题。

目前的逻辑是：

如果用户未经过身份验证并尝试访问 / admin-panel 或其子女，他/她将被重定向到 /＆amp ;; 登录页面。
如果用户登录并访问 /＆amp ;; （登录页面），他/她会被重定向到 / admin-panel

问题是当用户登记并且在 / admin-panel 上并重新加载页面时会发生以下情况：

首先加载 /＆amp; 页面
然后 /＆amp; 将用户重定向到 / admin-panel 如果用户在重新加载后处于 / admin-panel / child_component ，则他/她将在 / admin-panel 上，并且必须再次导航到 / child_component

您能否解释一下当前行为的原因是什么？如果有某种方法让用户留在页面上，重新加载就会启动，并且可以避免不断重定向吗？

登录页面 /＆amp;

import React, { Component } from 'react';
import { Link, browserHistory } from 'react-router';
import { Tracker } from 'meteor/tracker'

class Backdoor extends Component {

  onSubmit(event) {
    event.preventDefault();

    // Collecting user input
    const self = this;
    const email = $(event.target).find('[name=email]').val();
    const password = $(event.target).find('[name=password]').val();

    Meteor.loginWithPassword(email, password, function (err) {
        browserHistory.push('admin-panel');
    });
  }

  componentWillMount(){
    Tracker.autorun(() => {
      if (Meteor.user()) {
        browserHistory.push('/admin-panel')
      } else if(!Meteor.user()) {
            browserHistory.push('/&')
      }
    })
  }

  render() {
    return (

    // Login form
    );
  }
}

export default Backdoor;

React-router paths'：

const routes = (
  <Router history={browserHistory}>

    <Route path='/' component={App}>
      <Router path='about' component={About} />
    </Route>

    <Route path='&' component={Backdoor} />

    <Route path='admin' component={AdminPanel}>
      <Router path='/admin/admin_component' component={AdminChild} />
    </Route>

  </Router>

Answer 1

我会按以下方式更改您的路线文件：

const routes = (
  <Router history={browserHistory}>
    <Route path='/' component={App}>
      <Route path='about' component={About} />
      <Route path='&' component={Backdoor} />
      <Route path='admin' component={Admin} />
      <Route path='admin/admin_component' component={AdminChild} />
      <Route path='admin/admin_panel' component={AdminPanel} />
    </Route>
 </Router>
);

所以我们摆脱了嵌套＆＃34;路由器＆＃34;你在那里的组件，并添加了一个＆＃34; AdminPanel＆＃34;零件。

我通常做的一件事就是为我的应用分配一个IndexRoute。你可以查看它，它可能会提供一些好处，我没有添加它，因为你没有在你的代码中有它。

另一个效率（IMO）是将您的管理路由嵌套为：

const routes = (
  <Router history={browserHistory}>
    <Route path='/' component={App}>
      <Router path='about' component={About} />
      <Route path='&' component={Backdoor} />
      <Route path='admin' component={Admin}>
        <Route path='/admin_component' component={AdminChild} />
        <Route path='/admin_panel' component={AdminPanel} />
      </Route>
   </Route>
 </Router>
);

请注意，管理面板嵌套在管理路由中，所以要实现这一点，它将是/ admin / admin_panel。另外，我会使用＆＃34;＆＃34;引用而不是＆＃39;。

Answer 2

首先，我已经摆脱了 /＆amp; 路线，现在管理员身份验证路线看起来像这样：

const newRoutes = (

 <Router history={browserHistory}>
  <Route path='/' component={App}>
    <Router path='about' component={About} />
  </Route>
  <Route path='/admin' component={Admin} >
    <Route path='/admin/admin_child' component={AdminChild} />\
    // Feel free to add more routes here
  </Route>
</Router>
);

因此，在管理路径中，您可以定义 if 语句，以检查用户是否已登录。孔组件如下所示：

export class Admin extends Component {

  componentWillMount(){
    Tracker.autorun(() => {
      if(!Meteor.userId()) {
            browserHistory.push('/admin')
      }
    })
  }

  render(props) {
    if (Meteor.userId()){
      return (<div><JuliaNav />{this.props.children}</div>)
    } else {
      return (<div><Backdoor /></div>)
    }
  }
}

因此，如果管理员未登录，则React返回登录表单，如果他/她已登录该组件，则返回AdminNavigation以进一步与数据交互。跟踪器检查用户的状态，如果单击按钮Log Off（在AdminNavigation内），将重新加载页面（使用browserHistory.push），AdminNavigation组件将被替换为登录表单。

React-router重定向循环遍历Meteorjs中的组件

2 个答案: