Question

我的Web应用程序通过Firebase使用身份验证。我有一个应用栏，它根据用户是否登录显示按钮。如果该用户是管理员，我想在应用栏上显示另一个按钮。我想知道是否有可能使用用户的uid来使他们成为管理员。下面是到目前为止的代码。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import logIn from '../../auth/login.js'
import logOut from '../../auth/logout.js'
import { Link } from 'react-router-dom'
import profilePage from '../pages/profilePage'
import homePage from '../pages/homePage'
import requestService from '../pages/requestService'
import requestedServices from '../pages/requestedServices'
import { Route } from 'react-router-dom';
import firebase, { auth, provider } from '../../config/firebaseConfig.js'



// All the following keys are optional.
// We try our best to provide a great default value.
const theme = createMuiTheme({
  typography: {
  useNextVariants: true,
  },
  palette: {
    primary: {
      main : '#196f3d'
    },
    secondary: {
      main : '#f7f9f9'
    },
    // error: will use the default color
  },
});

const styles = {
  root: {
    flexGrow: 1,
  },
  grow: {
    flexGrow: 1,
  },

};

class ButtonAppBar extends Component {
  static defaultProps = {
    classes: PropTypes.object.isRequired,
  };

  state = { isLoggedIn : false }
  state = { isAdmin : false }
  componentDidMount = () => {
    firebase.auth().onAuthStateChanged(user => {
      this.setState({ isLoggedIn: !!user })
      this.setState({ isAdmin : firebase.auth().user.uid='8uhMGWgWZENwT7S2YFECOlSFrHD2'})
      console.log("user", user)
    })

  }


  render()  {
    const { classes } = this.props;
    return (
      <MuiThemeProvider theme={theme}>
      <div className={classes.root}>
        <AppBar position="static" color='primary' >
          <Toolbar>
          <Typography variant="h5" color="secondary" className={classes.grow}>
              Greene Dog Walking
            </Typography>
            {this.state.isAdmin ? (
              <div>
              <Link to={'./requestedservices'}>
                <Button color="secondary">Requested Services</Button>
              </Link>
              </div>
            ) : (


            ) }


            {this.state.isLoggedIn ? (
              <div>
              <Link to={'./'}>
                <Button color="secondary">Home</Button>
              </Link>
              <Link to={'./service'}>
                <Button color="secondary">Request Service</Button>
              </Link>
              <Link to={'./requestedservices'}>
                <Button color="secondary">Requested Services</Button>
              </Link>
              <Link to={'./profile'}>
                <Button color="secondary">Profile</Button>
              </Link>
              <Button onClick={logOut} color="secondary">Logout</Button>
              </div>
              ) : (
              <div>
              <Link to={'./'}>
                <Button color="secondary">Home</Button>
              </Link>
              <Button onClick={logIn} color="secondary">Login</Button>
              </div>
            )  }
          </Toolbar>
        </AppBar>
      </div>
      </MuiThemeProvider>
    );
  }
}

export default withStyles(styles)(ButtonAppBar);

Answer 1

如果应用程序只有一名管理员，我认为您的代码是正确的，但是将用户角色存储在Firebase中而不是确定应用程序中的管理员状态不是更好吗？

用户实体具有角色属性，因此您可以通过检查角色属性来确定他/她是管理员

this.setState({ isAdmin : firebase.auth().role='admin'})

Answer 2

正如Eric指出的那样，如果您有一个用户是管理员，则此方法有效，但是请记住，这是不安全的。如果有人可以拆解该应用程序，他们可以找到该代码并轻松解决它。如果您的目的仅仅是隐藏标签以提供更好的用户体验，那很好。

相反，我建议您通过自定义声明来控制访问。我制作了一个有关该视频的视频，您可以检出here。还有blog post，codelab和getting started guide in the documentation。

指南中的示例可以让您大致了解它在JS中的外观：

firebase.auth().currentUser.getIdTokenResult()
  .then((idTokenResult) => {
     // Confirm the user is an Admin.
     if (!!idTokenResult.claims.admin) {
       // Show admin UI.
       showAdminUI();
     } else {
       // Show regular user UI.
       showRegularUI();
     }
  })
  .catch((error) => {
    console.log(error);
  });

如何使用Firebase在React中创建管理员状态？

2 个答案: