帶有React PropTypes的Auth0

Question

如何使用React PropTypes添加Auth0？

index.js

import App from '../components/App';
import WelcomeRoute from './Welcome';
import SettingsRoute from './Settings';
import CampaignRoute from './Campaign';

export default {
  path: '/',
  component: App,
  indexRoute: WelcomeRoute,
  childRoutes: [
    SettingsRoute,
    CampaignRoute
  ]
};

App.js

import React, {PropTypes} from 'react';
import Header from '../../components/Header';
import MessagesStack from '../../components/MessagesStack'

const App = ({children}) => (
  <div>
    <Header />
    <section className="ui main container">
      <MessagesStack />
      {children}
    </section>
  </div>
);

App.propTypes = {
  children: PropTypes.element.isRequired
};

export default App;

Auth0中的示例顯示了這一點：

App.js

import React, {Component} from 'react';
import {Router, Route, browserHistory} from 'react-router';
import {requireAuth} from '../auth';
import Site from './Site';
import Home from './Home';
import Login from './Login';
import EditProfile from './EditProfile';

class App extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route component={Site}>
          <Route path="/" component={Home} />
          <Route path="/login" component={Login} />
          <Route onEnter={requireAuth}>
            {/* Place all authenticated routes here */}
            <Route path="/profile/edit" component={EditProfile} />
          </Route>
        </Route>
      </Router>
    );
  }
}

export default App;

Answer 1

如果您的組件依賴Auth0用戶個人資料和/或AuthService，則可以執行以下操作

import React, { PropTypes as T } from 'react'
...
import AuthService from 'utils/AuthService'
...

export class ProfileEdit extends React.Component {
  static propTypes = {
    profile: T.object,
    auth: T.instanceOf(AuthService)
  }

.
.
.
}   

這是完整的示例https://github.com/auth0-samples/auth0-react-sample/blob/master/04-User-Profile ，特別是在這里，您可以了解如何針對Auth0用戶配置文件使用PropTypes和AuthService https://github.com/auth0-samples/auth0-react-sample/blob/master/04-User-Profile/src/components/Profile/ProfileEdit.js#L8