Meteor, React Router 4 и аутентификация

Я прочесывал inet, пытаясь найти что-нибудь, что определяет, как обрабатывать аутентификацию в meteor и react router 4.

В принципе, я хочу, чтобы определенные маршруты были доступны только аутентифицированным пользователям. Есть ли на него какая-нибудь документация?

Асил

1 2
reactjs react-router meteor react-router-v4

1 ответ:

Meteor имеет очень хорошо развитую систему учетных записей пользователей. Он предоставляет готовые библиотеки для аутентификации OAuth с помощью Twitter, Facebook и т. д. а также базовые, но полезные пакеты пользовательского интерфейса. Сначала проверьте официальное руководство Meteor здесь.

Для реализации маршрутизации необходимо отслеживать Meteor.userId() и изменять маршрут через реактивную систему Метеора, называемую Tracker. Meteor.userId() возвращает идентификатор пользователя, если текущий подключенный пользователь вошел в систему, и null в противном случае. Я привожу пример кода, где React Маршрутизатор используется для маршрутизации, ниже. Обратите внимание, что вам также понадобится historyпакет , устанавливаемый и импортируемый при работе с React Router v4.

В вашем клиенте / main.js; 

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


Tracker.autorun(function(){
    const authenticated = !! Meteor.userId();
    onAuthChange(authenticated);
});

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

И в ваших маршрутах.файл js; 

import { Meteor } from 'meteor/meteor';
import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory'

import Home from './../ui/components/Home';
import Login from './../ui/components/Login';
import NotFound from './../ui/components/NotFound';
import Signup from './../ui/components/Signup';

const history = createBrowserHistory();
const unauthenticatedPages = ['/', '/signup'];
const authenticatedPages = ['/link'];

const publicPage = function  () {
    if (Meteor.userId()) {
        history.replace('/link');
    }
};

const privatePage = function  () {
    if(! Meteor.userId()) {
        history.replace('/');
    }
};

export const routes = (
    <Router history = {history}>
        <Switch>
          <Route exact path='/:id' component= {Login} onEnter={publicPage}/>
          <Route exact path='/signup' component={Signup} onEnter={publicPage}/>
          <Route exact path='/link' render={ () => <Home greet='User'/> } onEnter={privatePage} /> 
          <Route component={NotFound}/>
        </Switch>
    </Router>
);

export const onAuthChange = function (authenticated) {
    console.log("isAuthenticated: ", authenticated);
    const path = history.location.pathname;
    const isUnauthenticatedPage = unauthenticatedPages.includes(path);
    const isAuthenticatedPage = authenticatedPages.includes(path);
    if (authenticated && isUnauthenticatedPage) {   // pages: /signup and /
        console.log(`Authenticated user routed to the path /link`);
        history.replace('/link'); 
    } else if (!authenticated && isAuthenticatedPage) {
        console.log(`Unauthenticated user routed to the path /`);
        history.replace('/');
    }
};
2