Esistono esempi di autenticazione lato client per la risposta? Simile a https://github.com/fnakstad/angular-client-side-authEsempi di autenticazione lato client in risposta
In caso contrario, quale sarebbe un buon modo per gestire la rappresentazione basata sul ruolo/nascondere l'interfaccia utente specifica all'interno di reagire?
Ecco un buon esempio del flusso di autenticazione documentazione all'interno React-Router: https://github.com/rackt/react-router/tree/master/examples/auth-flow
Questo è un flusso veramente grande per l'autenticazione, ma non fornisce l'autorizzazione per mostrare/nascondere gli elementi dell'interfaccia utente in base al ruolo degli utenti. – Eric
Ho appena scritto un articolo su un'autenticazione basata sui ruoli. Forse ti aiuterà. http://blog.littleblimp.com/post/109540707808/role-based-authorization-with-react-js – uberllama
Si può leggere un blogpost ho scritto esattamente su questo argomento :). https://auth0.com/blog/2015/04/09/adding-authentication-to-your-react-flux-app/. C'è un esempio su Github che collega dal post.
Fammi sapere se lo trovi utile.
Acclamazioni
Grazie per questo. Ho finito per creare un mixin che includo sui componenti dove è necessario. Il mixin nasconde o mostra semplicemente un elemento HTML con CSS. Il nucleo del mixin è questo metodo: 'richiede: funzione (ospite) { \t se (this.profile.permissions.indexOf (ospite) === -1) { \t \t ritorno "nascosto"; \t} \t else return "visible"; } e poi faccio solo qualcosa tipo '
È bello. Tuttavia, i mixin non sono deprecati dalla v.13. Dovresti usare un apice di composizione ora @Eric – mgonto
@ mgonto Credo che abbiano ripristinato tale decisione e che i mixin siano tornati. Vedi per es. [1.0 - Navigation mixin] (https://github.com/rackt/react-router/blob/v1.0.0/CHANGES.md#navigation-mixin). Dicono che "Se stai usando il mixin" Navigation ", usa invece il mixin" History "." Si noti che stanno ancora raccomandando di utilizzare un mixin qui. –
Si dovrebbe dare un'occhiata al Stormpath React SDK e la sua example application.
Fondamentalmente, con Stormpath e il relativo SDK è possibile aggiungere facilmente all'applicazione le funzioni di autenticazione utente quali registrazione, accesso e ripristino della password.
è abbastanza freddo in quanto l'SDK integra con Reagire Router, l'aggiunta di autenticazione per la vostra applicazione è molto diretto:
<Router history={createBrowserHistory()}>
<Route path='/' component={MasterPage}>
<LoginRoute path='/login' component={LoginPage} />
<LogoutRoute path='/logout' />
<Route path='/register' component={RegistrationPage} />
<AuthenticatedRoute path='/profile' component={ProfilePage} />
</Route>
</Router>
Sì, è fondamentalmente. È sufficiente utilizzare AuthenticatedRoute nelle pagine che si desidera proteggere.
Quindi sullo LoginPage e RegistrationPage tutto ciò che dovete fare è aggiungere i componenti SDK LoginForm e RegistrationForm rispettivamente. E poi hai un posto dove i tuoi utenti potranno registrarsi e accedere.
Vuoi che si disconnettano? Basta usare il componente SDK LogoutLink.
<LogoutLink />
E all'interno delle pagine, se si vuole nascondere/contenuti spettacolo basato se un utente è autenticato o meno, si può semplicemente utilizzare i componenti SDK Authenticated e NotAuthenticated.
<Authenticated>
I'm authenticated. So show this!
</Authenticated>
breve sarà anche possibile specificare gruppi (ruoli) al componente Authenticated. Quindi puoi specificare che mostrerai solo una parte di un componente se è autenticato in un determinato gruppo. Per esempio.
<Authenticated inGroup='administrators'>
I'm an administrator \o/
</Authenticated>
E 'così semplice :)
Se questo suona fresco posso consigliare che si dà un'occhiata al post sul blog che ho scritto. Essa vi porterà attraverso la costruzione di un'applicazione reagire con queste caratteristiche di gestione degli utenti:
https://stormpath.com/blog/build-a-react-app-with-user-authentication/
Diniego: ho costruito l'SDK e Lavoro per Stormpath :)
Ciao Robin, Grazie per l'esempio, davvero utile. Comunque sto ottenendo un errore qui quando si cerca di adattarsi con il mio 'codice esistente: bundle.js: 33050 Uncaught TypeError: non può leggere proprietà 'spedizione' di null' metodo: '_createClass (UserActions, [{ \t chiave: 'login', \t valore:. funzione di login (opzioni, callback) { \t this.context.getDispatcher() spedizione ({ \t actionType: _UserConstants2.default.USER_LOGIN, \t opzioni: opzioni, \t callback : callback \t}); \t } \t} ' Il problema sembra essere su this.context.getDispatcher(), qualsiasi idea quale potrebbe essere il problema? Grazie –
Ehi Thomas! Fantastico vedere che lo stai provando. La mia ipotesi è che ['ReactStormpath.init();'] (https://github.com/stormpath/stormpath-sdk-react/blob/master/docs/api.md#initialization) non venga eseguito correttamente. Se vuoi puoi mandarmi una mail a 'robin [at] stormpath [dot] com' e ti aiuterò :) Cheers! –
Come si carica un oggetto profilo con i dati utente? Voglio dire passarlo a un client da un server? – Green
Sei alla ricerca di un autenticazione lato client flusso di lavoro o un modo per gestire ruoli diversi mostrando parti diverse dell'interfaccia utente? o entrambi? – ladislas
non un authflow. solo alla ricerca di un modo per gestire diversi ruoli per mostrare diverse parti dell'interfaccia utente. – Eric