如何使用 React Navigation 实现基于角色的授权？答案

【问题标题】：How to implment role based authorizarion with React Navigation?如何使用 React Navigation 实现基于角色的授权？
【发布时间】：2018-08-27 04:45:19
【问题描述】：

我知道这不是通常的要求，但是是否可以使用 React Navigation 创建基于角色的授权系统？如果是，是否有补充工具来实现这一目标？还是只能使用 React Navigation 来实现？

【问题讨论】：

标签： react-native react-navigation user-roles

【解决方案1】：

有很多方法可以使用react navigation 库来制定授权规则。

以下是一些值得关注的好文章：

当我使用redux-saga 时，我喜欢用它来控制身份验证流程，因为它很容易以更线性的方式处理，监听redux-persist 操作

我认为不存在这样做的正确方法，因为这在很大程度上取决于您的需求、应用程序流程和后端。

【讨论】：

【解决方案2】：

如果您将react-navigation 与redux 集成，您将能够在redux 中间件中拦截所有导航操作（带有navigate/ 前缀。例如：navigate/HOME）。您可以在中间件中编写自己的逻辑，只让授权的操作到达减速器。

按照本指南将 react-navigation 集成到 redux - https://reactnavigation.org/docs/redux-integration.html。

此视频将帮助您为此目的使用中间件 - https://www.youtube.com/watch?v=Gjiu7Lgdg3s。

【讨论】：

【解决方案3】：

这是一个简单的逻辑。这是我的逻辑，它运行得很好......

RequireAuth.js

import React, { Component } from "react";
import { authedUser } from '../../../helper/helpers';
import { Lang } from '../../../helper/Lang';
import Login from "../../screens/form/login";
import {
  Container,
  Header,
  Title,
  Content,
  Button,
  Icon,
  H1,
  H2,
  H3,
  Text,
  Left,
  Right,
  Body
} from "native-base";
import styles from "./styles";

const RequireAuth =(obj)=>{
  const Component=obj.component;
return class App extends Component {
        state = {
            isAuthenticated: false,
            isLoading: true
        }
componentDidMount() {
            authedUser({loaduserow:false,noCatch:true}).then((res) => {
              if(res.loged){
                this.setState({isAuthenticated: true, isLoading: false});}
              else{
                this.setState({isAuthenticated: false, isLoading: false});}
            }).catch(() => {
                this.setState({isLoading: false});
            })
        }
  render() {
           const { isAuthenticated, isLoading } = this.state;


           if(isLoading) {
               return(
      <Container style={styles.container}>
        <Content padder>
          <H3 style={{marginTop:20,marginBottom:30, borderBottomWidth: 1}}>Authenticating...</H3>
        </Content>
      </Container>)
           }
           if(!isAuthenticated) {
               return <Login {...this.props} />
           }
           return <Component {...this.props} />

  }
}}

export default RequireAuth;

src/App.js

....
import RequireAuth from "./screens/wall/RequireAuth";
...
const AppNavigator = StackNavigator(
  {
    Drawer: { screen: Drawer },
    Login: { screen: Login },
    About: { screen: About },
    Profile: { screen: RequireAuth({component:Profile,name:'Profile'}) },
.....

authedUser() 只是一个简单的承诺，如果经过身份验证，则返回 resolve({loged:true})，而未经过身份验证则返回 resolve({loged:false})

【讨论】：

这是身份验证。 OP 要求基于角色的授权。

【解决方案4】：

检查下面这可能会帮助你

https://jasonwatmore.com/post/2019/02/01/react-role-based-authorization-tutorial-with-example

【讨论】：