Question

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

Answer 1

使用react navigation库有很多方法可以执行授权规则。

以下是一些好文章：

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

我认为正确的方式不存在这样做，因为它取决于你的需求，应用程序流和后端。

Answer 2

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

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

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

Answer 3

在下面选中此项可能会对您有所帮助

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

Answer 4

这是简单的逻辑。这是我的逻辑，效果很好...

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})

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

4 个答案: