反应认证答案

【问题标题】：React Authentication反应认证
【发布时间】：2017-08-20 20:24:53
【问题描述】：

希望将登录页面添加到我的应用程序，但没有任何最新的 react 或 react-router 教程。

考虑护照 js，并在成功验证后将其重新路由到我的 react 应用程序。

想法？有没有更好的办法？

【问题讨论】：

【解决方案1】：

使用 Auth0： 我自己也是新手，在这个确切的问题上花了几天时间。似乎 Firebase、Okta 和 Auth0 都有向 React 添加身份验证的简单方法。我发现的最简单的教程似乎是这个17 minute Youtube video，使用Auth0。（视频本身使用了 Gatsby，但在 cmets 部分你会看到一个使用 create-react-app 的链接。）

它主要依赖于一个名为 react-use-auth 的 npm 包。

这是我的 demo program on codesandbox.io 基于 create-react-app（缺少 Auth0 域和 client_id），下面粘贴了代码的重要部分。

index.js 文件：

import React from "react";
import ReactDOM from "react-dom";
import { navigate } from "@reach/router";
import { AuthProvider } from "react-use-auth";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <AuthProvider
      navigate={navigate}
      auth0_domain="YOUR_AUTH0_DOMAIN"
      auth0_client_id="YOUR_AUTH0_CLIENT_ID"
    >
      <App />
    </AuthProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

App.js：

import React from 'react';
import { Router } from "@reach/router";
import { useAuth } from "react-use-auth";
import Callback from "./components/Callback";
import './App.css';

function App() {
  const { isAuthenticated, login, logout, user } = useAuth();

  const Login = () => {
      return isAuthenticated() ? 
        <button onClick={logout}>Logout</button> :
        <button onClick={login}>Login</button>;
  };

  const Greeting = () => {
    return isAuthenticated() ?
      <h1>Hi, {user.name}!</h1> :
      <h1>Hi there! Please login.</h1>;
  }

  return (
    <div className="App">
      <h1>Auth0 Example</h1>
      <Greeting />
      <Login />
      <Router>
        <Callback path="/auth0_callback" />
      </Router>
    </div>
  );
}

export default App;

组件/Callback.js：

import React, { useEffect } from "react";
import { useAuth } from "react-use-auth";

const Auth0CallbackPage = () => {
  const {handleAuthentication} = useAuth();
  useEffect(() => {
    handleAuthentication();
  }, [handleAuthentication]);

  return (
    <div>
      <p>Logging in...</p>
    </div>
  );
};

export default Auth0CallbackPage;

【讨论】：

【解决方案2】：

您可以使用onEnter 回调保护所有路由

ReactDOM.render(
    (
      <Provider store={store}>
        <Router history={browserHistory}>
            <Route path="/" component={Nav} >
                <IndexRoute component={Home}/>
                <Route path='/customers' component={Customers} onEnter={SignIn}/>
                <Route path='/vendors' component={Vendors} onEnter={SignIn}/>

        </Router>
      </Provider>
    ), document.getElementById('reactEntry'));

在SignIn函数中，做你需要做的检查用户是否可以登录。如果不能，显示错误信息

另外，这是一个很好的例子：https://developer.okta.com/blog/2017/03/30/react-okta-sign-in-widget

【讨论】：