Question

我正在尝试根据登录用户所拥有的自定义声明对某些组件实施限制。我已经实现了一种方法，可以在对用户进行身份验证时加载组件，因此无需基于我想要的声明就可以授权。

我正在关注Robin Wieruch的精彩学习材料，并停留在“授权”部分，如果它对尝试回答我的问题https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/的人有帮助的话

Home组件没有下面我想要的逻辑：

import React from "react";

import {withAuthz} from "./Components/Session";

class Home extends React.Component {

    render() {

        return(


            <h1>Protected content</h1>

        );
    }
}

const condition = authUser => !!authUser;

export default withAuthz(condition)(Home);

如果满足condition，则呈现此组件，在这种情况下，就像在Firebase中登录了authUser一样。 Home组件与HOC withAuthz一起导出，HOC condition和Home进入我的withAuthz，如果条件在const condition = authUser => !!authUser.claims.admin;内通过，则将呈现它们。

现在，我希望能够根据声明将自己的病情更改为类似的情况：

firebase.auth().currentUser.getIdTokenResult.idTokenResult.claims.admin...

我知道这可以通过按照Firebase文档从idToken中提取声明来完成：

Home

如何防止基于声明而不是仅根据用户是否经过身份验证来呈现withAuthz组件？ HOC const withAuthz = (condition) => Component => { class WithAuthz extends React.Component { componentDidMount() { this.listener = this.props.firebase.auth.onAuthStateChanged( authUser => { if (!condition(authUser)) { this.props.history.push("/login"); } } ) } // further render the given component if a user is authenticated etc...只是检查是否在安装时验证用户是否通过身份验证，然后决定是重定向还是呈现已传递给它的内容：

withAuthz

编辑进度

我已经设法在condition HOC中获取经过身份验证的用户的声明，并在Home组件中更改了const condition = idTokenResult => !!idTokenResult;：

withAuthz

在componentDidMount() { this.listener = this.props.firebase.auth.onAuthStateChanged( authUser => { /*if (!condition(authUser)) { this.props.history.push("/login"); }*/ authUser.getIdTokenResult().then((idTokenResult) => { if (!condition(idTokenResult)) { this.props.history.push("/login") } console.log(idTokenResult.claims); }) } ) } HOC中提出主张：

idTokenResult.claims

但是当我将条件更改为以下内容时，在下面的行中回答错误，说const condition = idTokenResult => !!idTokenResult.claims.admin;为空

olympic_tbl = read_csv("athlete_events.csv", n_max = 500)

如何访问用户自定义声明并阻止使用Firebase访问组件？

0 个答案: