反应私有路由 Firebase

Question

我想在我的 react 应用程序中添加私有路由，当用户登录时将重定向到帐户页面，我使用 firebase 作为我的数据库。

我看到了一些教程，但我认为那是用于 mern 堆栈的代码。你能帮我如何实现私有路由，这是我的代码，谢谢。

注册

class SignUp extends React.Component {
constructor() {
super();

this.state = {
  displayName: "",
  email: "",
  password: "",
  confirmPassword: "",
};
}

handleSubmit = async (event) => {
event.preventDefault();
const { displayName, email, password, confirmPassword } = this.state;

if (password !== confirmPassword) {
  alert("Password don't match");
  return;
}

try {
  const { user } = await auth.createUserWithEmailAndPassword(
    email,
    password
  );

  await createUserProfileDocument(user, { displayName });

  this.setState({
    displayName: "",
    email: "",
    password: "",
    confirmPassword: "",
  });
} catch (error) {
  console.error(error);
}
};

handleChange = (event) => {
const { name, value } = event.target;

this.setState({ [name]: value });
};

 render() {
const { displayName, email, password, confirmPassword } = this.state;
return (
  <div className="sign-up">
    {Form}
  </div>
);
}
}

export default SignUp;

登录

class SignIn extends React.Component {
constructor(props) {
super(props);

this.state = {
  email: "",
  password: "",
};
}

handleSubmit = async (event) => {
event.preventDefault();

const { email, password } = this.state 

try {
  await auth.signInWithEmailAndPassword(email, password)
  this.setState({ email: "", password: "" });
} catch (error) {
  console.log(error);
  
}


};

handleChange = (event) => {
const { value, name } = event.target;

this.setState({ [name]: value });
};

render() {
return (
  <div className="sign-in">
    {form}
  </div>
);
}
}

export default SignIn;

应用 js

class App extends React.Component {
constructor() {
super();

this.state = {
  currentUser: null,
};
}

unsubscribeFromAuth = null;

componentDidMount() {
this.unsubscribeFromAuth = 
auth.onAuthStateChanged(async (userAuth) => {
  if (userAuth) {
    const userRef = await createUserProfileDocument(userAuth);

    userRef.onSnapshot((snapShot) => {
      this.setState({
        currentUser: {
          id: snapShot.id,
          ...snapShot.data(),
        },
      });
    });
    
  } else {
    this.setState({currentUser: userAuth})
  }
});
}

componentWillUnmount() {
this.unsubscribeFromAuth();
}

render() {
return (
  <div>
    <Header currentUser={this.state.currentUser} />
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route path="/shop" component={ShopPAge} />
      <Route path="/signin" component={SignInAndSignUpPage} />
    </Switch>
  </div>
);
}
}

export default App;

Answer 1

你有两个选择

首先，在组件本身使用this.props.history.push 包装组件后使用withRouter

import { withRouter } from 'react-router-dom'
...
try {
  await auth.signInWithEmailAndPassword(email, password)
  this.setState({ email: "", password: "" });
  this.props.history.push('/shop') // in case you want redirect to shop
}

...

export default withRouter(SignIn);

其次，在路由声明处使用render而不是component，并使用Redirect组件

import { Redirect } from 'react-router-dom'

...

<Route path="/signin" render={()=>this.state.currentUser ? <Redirect to='/shop' /> :<SignInAndSignUpPage/>} />