[译] 用 Auth0 保证 React 应用安全

npm install --save auth0-js react-router react-router-dom

// src/Auth/Auth.js
import auth0 from 'auth0-js';
export default class Auth {
  constructor() {
    this.auth0 = new auth0.WebAuth({
      // 必须更新以下三行！
      domain: '<AUTH0_DOMAIN>',
      audience: 'https://<AUTH0_DOMAIN>/userinfo',
      clientID: '<AUTH0_CLIENT_ID>',
      redirectUri: 'http://localhost:3000/callback',
      responseType: 'token id_token',
      scope: 'openid profile'
    });
    this.getProfile = this.getProfile.bind(this);
    this.handleAuthentication = this.handleAuthentication.bind(this);
    this.isAuthenticated = this.isAuthenticated.bind(this);
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.setSession = this.setSession.bind(this);
  }
  getProfile() {
    return this.profile;
  }
  handleAuthentication() {
    return new Promise((resolve, reject) => {
      this.auth0.parseHash((err, authResult) => {
        if (err) return reject(err);
        console.log(authResult);
        if (!authResult || !authResult.idToken) {
          return reject(err);
        }
        this.setSession(authResult);
        resolve();
      });
    })
  }
  isAuthenticated() {
    return new Date().getTime() < this.expiresAt;
  }
  login() {
    this.auth0.authorize();
  }
  logout() {
    // 清除 id token 和过期时间
    this.idToken = null;
    this.expiresAt = null;
  }
  setSession(authResult) {
    this.idToken = authResult.idToken;
    this.profile = authResult.idTokenPayload;
    // 设置 id token 的过期时间
    this.expiresAt = authResult.expiresIn * 1000 + new Date().getTime();
  }
}

// src/Callback/Callback.js
import React from 'react';
import { withRouter } from 'react-router';
function Callback(props) {
  props.auth.handleAuthentication().then(() => {
    props.history.push('/');
  });
  return (
    <div>
      Loading user profile.
    </div>
  );
}
export default withRouter(Callback);

// src/App.js
import React from 'react';
import {withRouter} from 'react-router';
import {Route} from 'react-router-dom';
import Callback from './Callback/Callback';
import './App.css';
function HomePage(props) {
  const {authenticated} = props;
  const logout = () => {
    props.auth.logout();
    props.history.push('/');
  };
  if (authenticated) {
    const {name} = props.auth.getProfile();
    return (
      <div>
        <h1>Howdy! Glad to see you back, {name}.</h1>
        <button onClick={logout}>Log out</button>
      </div>
    );
  }
  return (
    <div>
      <h1>I don't know you. Please, log in.</h1>
      <button onClick={props.auth.login}>Log in</button>
    </div>
  );
}
function App(props) {
  const authenticated = props.auth.isAuthenticated();
  return (
    <div className="App">
      <Route exact path='/callback' render={() => (
        <Callback auth={props.auth}/>
      )}/>
      <Route exact path='/' render={() => (
        <HomePage
          authenticated={authenticated}
          auth={props.auth}
          history={props.history}
        />)
      }/>
    </div>
  );
}
export default withRouter(App);

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import Auth from './Auth/Auth';
import './index.css';
import App from './App';
const auth = new Auth();
ReactDOM.render(
  <BrowserRouter>
    <App auth={auth} />
  </BrowserRouter>,
  document.getElementById('root')
);