javascript - 按 Angular 色/权限为用户授权 React 组件

Question

我用 React 和 ASP .Net Core 做了一个 SPA。身份验证通过 Bearer-Tokens 完成(使用 IdentityServer4 和 oidc-client)，授权在服务器端完成(使用 PolicyServer)。

到目前为止我可以:

• 通过将我的用户重定向到我的 React 来验证我的用户IdentityServer-登录页面。
• 授权我的登录用户使用我的 Rest-Api，前提是他有所需的权限来自策略服务器的 Angular 色/权限。使用 axios 访问 Rest-Api 也没有任何问题。

登录后，在我的应用程序中，可以看到多个按钮，单击它们将打开一个组件。我的问题是:我找不到一个好的方法来授权用户在按下按钮后访问这些组件。

我需要检查用户是否具有所需的 Angular 色/权限或声明。

在没有找到任何方法之后，我考虑使用 axios 来检查 HttpGet，该 HttpGet 返回用户是否被授权。但在客户端使用 axios 命令很可能不是一个好方法。

有人可以帮忙吗？

Answer 1

我个人使用 HOC(Higer Order Component)/Wrapper 进行路由授权。

HOC 是做什么的？

• 我们将各个路由所需的组件传递给 HOC 以及所需的其他数据。在路由的 component 属性中，将 HOC 传递为 component={WithAuthorization(MyComponent,miscData)/>

• 它允许我们有条件地渲染组件。简而言之如果授权逻辑失败，则渲染后备组件或渲染传递给它的实际组件

我典型的 HOC 看起来像:

export const WithAuthorization = (Component, menuObj) => {
    /* For route's data, you can have menu's metadata */
    const { menuId, action, menuName } = menuObj;
    class UserMode extends React.Component {
        state = {
            isAllowedToAccess: false,
            isProcessCompleted: false,
            menuPermissionObj: {},
            masterAccess: false
        };

        async componentDidMount() {
            const permission = this.props.auth.menuPermissions
                ? this.props.auth.menuPermissions
                : JSON.parse(localStorage.getItem('menu_permissions'));
            await this.checkAuthorization(permission);
        }

        shouldComponentUpdate(nextProps, nextState) {
            /* 
            Restrict re-render until there is 
            menuPermissions object available for user profile
            */
            if (this.props.auth.menuPermissions) {
                return true;
            } else {
                return false;
            }
        }

        /* Business logic to check roles & permissions for the user and restrict them */
        checkAuthorization = permissionArr => {
            let access = false;
            let menuPermissionObj = {};

            /* PERFORM YOUR BUSINESS LOGIC HERE */
            function apiCall(){
            /* return true or false */
            }
            access = apiCall(); // either true or false depending on API call

            console.log('has access', access);
            this.setState({
                isAllowedToAccess: access,
                isProcessCompleted: true,
                menuPermissionObj
            });
        };

        render() {
            const {
                isProcessCompleted,
                isAllowedToAccess,
                menuPermissionObj,
                masterAccess
            } = this.state;
            return isProcessCompleted ? (
                isAllowedToAccess ? (
                    <Fragment>
                        <Component
                            {...this.props}
                            menuAccess={menuPermissionObj}
                            masterAccess={masterAccess}
                        />
                    </Fragment>
                ) : (
                    <Redirect to="/dashboard" />
                )
            ) : (
                <Loading state={this.state} />
            );
        }
    }

    /* OPTIONAL: Use react-redux's connect if you want to access redux's store data */

    return UserMode;
};