Meteor、React Router 4 和身份验证

Question

我一直在搜索 inet，试图找到定义如何在 meteor 和 React router 4 中处理身份验证的任何地方。

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

阿瑟尔

Answer 1

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

要实现路由，您需要跟踪 Meteor.userId() 并通过名为 Tracker. Meteor.userId() returns a userId if currently connected user is logged in, and null otherwise. I provide an example code where React Router is used for routing, below. Notice that you'll will also need the historypackage 的 Meteor 反应系统更改路由，以便在使用 React Router v4 时安装和导入。

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

Answer 2

这里有一个巧妙的方法来获得 public 路由和经过身份验证的路由： https://gist.github.com/lucnat/643988451c783a8428a2811dbea3d168

public 组件对所有人可见，他们使用 PublicLayout
经过身份验证的组件仅对经过身份验证的用户可见 - 他们使用 AuthenticatedLayout

我们可以有任意数量的布局。在上面的示例中，有两个布局 - 每个都有自己的导航栏。

Answer 3

我一直在尝试使用功能组件获得更新的方法。我已经尝试实施类似于 React-router 文档的条件检查。在等待 Meteor.loginWithPassword 完成后将 history.push 提供给所需的路线后，这是有效的。但是刷新浏览器最终再次呈现登录页面。

Meteor 处于 Meteor.loggingIn() 的中间状态。在身份验证检查中处理此状态修复了此问题。

随时提供反馈。

我创建了一个要点，其中包含 Meteor 中路由身份验证的实现 - 具有功能组件和挂钩的 React-router 堆栈。

检查这个要点和实现的基本结构。 https://gist.github.com/rinturj84/0ef61005bf3a4ca5fb665dfc5f77e3d1

Meteor、React Router 4 和身份验证

Meteor, React Router 4, and Authentication

meteor

reactjs

react-router

meteor-accounts

react-router-v4