javascript - 个性化导航栏

Question

我正在尝试个性化导航栏(路由器通量库)。特别是，我在应用程序启动时检查用户的 Angular 色，以这种方式在主页中，如果用户具有 Angular 色:“Role_Plus”，他无法注销，因此文本“logout”消失，在其他情况下文本显示。

我在 componentDidMount 中创建了一个代码来检查用户的凭据并且它有效。但在代码的 render() 部分有一个错误，所以我无法使用。

当用户是 Role_Plus 时，我还尝试使用设置为 1 的标志，但此方法不起作用。

(I commented the code in the parts where there is the error.)

这是代码:

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: ''
    };
    this.flag = '';
  }


  componentDidMount() {
    this.checkUser()
    }

  checkUser(){
    User.getLoggedUser()
        .then(dataUserLogged => {   
          if (dataUserLogged !== null) {
            global.user = new User(JSON.parse(dataUserLogged));
            // The console log print the right role without problems
            console.log("User's Role: " + global.user.data.Roles)
            if(global.user.data.Roles == "ROLE_PLUS") {
              this.setState ({ flag: 1})
            }
          } })
        .catch(err => {
          console.log(err);
        })
      }


  render() {
    console.log("FLAG: " + this.state.flag)    
    return (     
      <Router>
        <Scene key="root">
          <Scene
            key="homepage"
            component={Homepage}
            type="reset"    

            // I have tried this method but it doesn't work (The logout text is always display)
            /*rightTitle={ this.state.flag === 1 ? "" : "Logout"}
            onRight={
              this.state.flag === 1 
              ? () => {}
              : () => Actions.refresh(App.logout())
            }*/

            // In this case there is an error: "Cannot read property 'data' of undefined "
            rightTitle={ global.user.data.Roles !== "ROLE_PLUS" ? "Logout" : ""}
            onRight={
              globaluser.data.Roles !== "ROLE_PLUS"
                ? () => Actions.refresh(App.logout())
                : () => {}
            }
          />

您认为，如果 Angular 色不是:“Role_Plus”，我该如何检查凭据用户并显示文本“logout”？

非常感谢。

Answer 1

'Global.user' 是函数中的局部变量，'Global.user' 的值在其他地方未知。请将值传递给status值。

 componentWillMount() {
    this.checkUser()
    }

checkUser(){
    User.getLoggedUser()
        .then(dataUserLogged => {   
          if (dataUserLogged !== null) {
            global.user = new User(JSON.parse(dataUserLogged));
            // The console log print the right role without problems
            console.log("User's Role: " + global.user.data.Roles)
            if(global.user.data.Roles == "ROLE_PLUS") {
              this.setState ({ flag: global.user.data.Roles})
              console.log("this is come in?");
            }
          } })
        .catch(err => {
          console.log(err);
        })
      }
...
rightTitle={ this.state.flag === "ROLE_PLUS" ? "Logout" : ""}