Meteor、React路由器4和身份验证

Question

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

基本上，我希望某些路由只对经过身份验证的用户可用。有相关文件吗？

阿西尔

Answer 1

我一直在尝试使用功能组件来获得一种更为更新的方法。我尝试过实现一个与React router的文档类似的条件检查。这在给出history.push至所需路线后起作用，等待Meteor.loginWithPassword完成。但刷新浏览器最终再次呈现登录页面。

流星具有中间状态Meteor.loggingIn（）。在身份验证检查中处理此状态可修复此问题。

请随意给予反馈。

我在Meteor-React路由器堆栈中创建了一个路由认证实现的要点，其中包含功能组件和挂钩。

将这一要点与实施的基本结构核对一下。https://gist.github.com/rinturj84/0ef61005bf3a4ca5fb665dfc5f77e3d1

Answer 2

以下是一种获得公共路线和认证路线的简洁方法：https://gist.github.com/lucnat/643988451c783a8428a2811dbea3d168

• 公共组件对每个人都可见，他们使用PublicLayout
• 只有经过身份验证的用户才能看到经过身份验证的组件--他们使用的身份验证布局

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

Answer 3

流星有一个非常发达的用户帐户系统。它为使用Twitter、Facebook等进行OAuth身份验证提供了现成的库，以及基本但有用的UI包。先在这里查看流星的官方指南。

为了实现路由，您需要跟踪Meteor.userId（），并通过Meteor的反应式系统Tracker更改路由Meteor.userId（）如果当前连接的用户已登录，则返回用户ID，否则返回null。下面，我提供了一个React路由器用于路由的示例代码。请注意，在使用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('/');
    }
};