Метеор с реагирует роутер v4 - редирект не работает - PullRequest
Новая
       14

Метеор с реагирует роутер v4 - редирект не работает

0 голосов
/ 28 октября 2018

У меня есть два файла: route.js и main.js.Я создал трекер внутри файла main.js, где постоянно проверяю состояние входа в систему.Исходя из alanning: роли, роли пользователей, мне нужно перенаправить пользователей на интерфейс, отличный от администраторов.Но, похоже, ничего не делает.

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, для которого доступно свойство history: 

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

следующим шагом является создание постоянной переменной, которая обеспечивает легкий доступ к истории: 

const history = createBrowserHistory();

Наконец, мы можем использовать return history.replace('/admin'); для перехода на страницы

1 Ответ

0 голосов
/ 29 октября 2018

Посмотрите это 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');
}

Редактировать:

Добавить Passage как через NPM: 

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

Компонент прохода, используемый дляопределение маршрутов в вашем приложении.

Затем добавьте тег Passage перед тегом <BrowserRouter>, например 

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

, надеюсь, это поможет.

...