Question

我一直在努力寻找能够找到如何在流星中处理身份验证并对路由器4做出反应的任何地方。

基本上，我希望某些路由仅供经过身份验证的用户使用。有没有任何文件？

Aseel

Answer 1

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

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

在你的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

这是拥有公开路线和经过身份验证的路线的一种好方法： https://gist.github.com/lucnat/643988451c783a8428a2811dbea3d168

每个人都可以看到公共组件，它们使用PublicLayout
已认证的组件仅由已认证的用户可见- 他们使用AuthenticatedLayout

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

Answer 3

我一直在尝试使用功能组件获得更新的方法。我已经尝试实现类似于React-router文档的条件检查。等待Meteor.loginWithPassword完成后，将history.push到所需的路径后，此方法便起作用了。但是刷新浏览器后又重新呈现了登录页面。

流星的中间状态为Meteor.loggingIn()。在身份验证检查中处理此状态可以解决此问题。

随时提供反馈。

我创建了一个要点，以实现流星中路由验证的实现-具有功能组件和挂钩的React-router堆栈。

请检查实现的基本要点。 https://gist.github.com/rinturj84/0ef61005bf3a4ca5fb665dfc5f77e3d1

Meteor，React Router 4和身份验证

3 个答案: