Meteor、React Router 4 和身份验证

Question

我一直在搜索 inet 试图找到任何定义如何处理流星和反应路由器 4 中的身份验证的地方。

基本上，我希望某些路由仅对经过身份验证的用户可用。有没有关于它的文档？

阿塞尔

Answer 1

Meteor 有一个非常完善的用户账户系统。它为 Twitter、Facebook 等的 OAuth 身份验证提供了现成的库，以及一个基本但有用的 UI 包。首先在这里查看 Meteor 的官方指南。

为了实现路由，您需要Meteor.userId()通过 Meteor 的反应式系统Tracker来跟踪和更改路由。Meteor.userId()如果当前连接的用户已登录，则返回一个 userId，否则返回 null。我在下面提供了一个示例代码，其中 React Router 用于路由。请注意，在使用 React Router v4 时，您还需要安装和导入history包。

在你的客户端/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'));
});

在你的 routes.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('/');
    }
};