Question

我有两个文件：route.js和main.js。我在main.js文件中创建了一个跟踪器，在其中我不断检查登录状态。基于alanning：roles用户角色，我需要将用户重定向到与管理员不同的界面。但似乎什么也没做。

main.js

import {Meteor} from 'meteor/meteor';
import {Tracker} from 'meteor/tracker';
import {onAuthenticationChange, routes} from '../imports/routes/routes';
import ReactDOM from 'react-dom';

Tracker.autorun(() => {
  const authenticated = !!Meteor.userId();
  let currentUserIsAdmin = false;

  if(authenticated) {
    const isAdmin = Roles.userIsInRole( Meteor.userId(), ['admin'], 'employees' );

    if(isAdmin) {
      currentUserIsAdmin = true;
    } else {
      currentUserIsAdmin = false;
    }
  }

  onAuthenticationChange(authenticated, currentUserIsAdmin);
});

Meteor.startup(() => {
  ReactDOM.render( routes, document.getElementById('customerPortalApp'));
});

router.js

import {Meteor} from 'meteor/meteor';
import {Route, BrowserRouter, Switch, Redirect} from 'react-router-dom';
import React from 'react';

...

const publicPages = [
  '/',
  '/login'
];
const adminPages = [
  '/admin',
  '/klant',
];
const customerPages = [
  '/klant',
]


// check authentication for pages
 export const onAuthenticationChange = (authenticated, currentUserIsAdmin) => {
  console.log('is authenticated...', authenticated);

  const path = this.location.pathname;
  const isUnauthenticatedPage = publicPages.includes(path);
  const isAuthenticatedPage = adminPages.includes(path);

  if( authenticated ) {
    if(currentUserIsAdmin) {
        console.log('huidige gebruiker is admin...');
        return <Redirect to="/admin"></Redirect>;
    } else {
        console.log('huidige gebruiker is normaal......');
        return <Redirect to="/klant"></Redirect>; 
    }
  } else if (!authenticated && isAuthenticatedPage) {
    console.log('No rights to view the page... routed to the path login page');
  }

}

function RouteWithLayout({layout, component, ...rest}){
  return (
    <Route {...rest} render={(props) =>
  React.createElement( layout, props, React.createElement(component, props))
}/>
  );
}

export const routes = (
<BrowserRouter>
    <Switch>
        {/* onEnter={publicPage} */}

        {/* default side */}
        <RouteWithLayout layout={AuthenticationLayout} exact path="/" component={AuthLogin} />
        <RouteWithLayout layout={AuthenticationLayout} exact path="/login" component={AuthLogin} />

        {/* admin side */}
        <RouteWithLayout layout={AdminLayout} path="/admin" exact component={AdminDashboard} />


        {/* customer side */}
        <RouteWithLayout layout={CustomerLayout} path="/klant" exact component={CustomerDashboard} />

        <Route component={PageNotFound} />
    </Switch>
  </BrowserRouter>
);

我也尝试使用this.props.history.push（'/ admin'），但this.props.history不可用

更新解决方案： 我首先将BrowserRouter更改为Router，该路由器具有可用的历史记录属性：

import {Router, Route, Switch} from 'react-router-dom';

下一步是创建一个常量变量，可以轻松访问历史记录：

const history = createBrowserHistory();

最后，我们可以使用return history.replace('/admin');导航到页面

Answer 1

查看此react-router软件包并安装并导入

import { Meteor } from 'meteor/meteor';
import React from 'react';
import { Router, Route, browserHistory } from 'react-router';

并按如下所示更改此行const path = this.location.pathname;

const path = browserHistory.getCurrentLocation().pathname;

并像下面一样添加browserHistory.replace('/admin');

if(currentUserIsAdmin) {
    console.log('huidige gebruiker is admin...');
    //return <Redirect to="/admin"></Redirect>;
    browserHistory.replace('/admin');
} else {
    console.log('huidige gebruiker is normaal......');
    //return <Redirect to="/klant"></Redirect>; 
    browserHistory.replace('/klant');
}

编辑：

通过NPM添加Passage：

npm i @dollarshaveclub/react-passage@latest --save

用于识别您应用中路线的Passage组件。

然后在Passage标签之前添加<BrowserRouter>标签，就像这样

<Passage targets={[ RouteWithLayout ]}>
   <BrowserRouter>
     ......
     ......
   </BrowserRouter>
</Passage>

希望它会有所帮助。

流星与React Router V4-重定向不起作用

1 个答案: