javascript - React 或 Node 中的用户登录和角色？

Question

我正在构建一个使用完整 meern 堆栈的新应用程序，并且我一直坚持有关 protected 路由、登录/注册和创建 ACL 用户 Angular 色的最佳实践。

我习惯在 Node 中使用护照或 jwt 之类的东西来执行此操作，但由于 React 有自己的路由器，我读到有一些方法可以保护 React 本身的路由。使用完整的 MERN 堆栈进行开发和设置用户 Angular 色的最佳方法是什么？

谢谢

Answer 1

您可以采取的一些方法是:

1. 将权限传递给 React 并在其中包含权限逻辑
2. 让 React 调用您的 API 以获取基于权限的 View 。

做第一或第二件事可以用类似的方式封装

如果你想根据权限显示隐藏。

class CanUserView extends Component {
    state = {allowed: false}
    componentDidMount(){
        this.checkPermissions()
    }
    async checkPermssions() {
        //This is where the two strategies can differ.
        //Either
        Api.checkPermission(this.props.permission);
        //Or
        this.props.user.permissions.includes(permission)

    }
    render(){
        if(this.state.allowed){
            return this.props.children
        } else {
            return null;
        }

    }
}

然后您可以在代码中使用它，例如

<CanView permission={"Admin"}>
    <AdminComponent />
</CanView>

当然，这不会向没有权限的用户隐藏代码。如果您想要这种用例，您可能需要在服务器端渲染并仅导入允许的 JS 文件。