Question

我是React.js的初学者，正在使用Firebase和React Router。我已经建立了一个单独的Auth.js文件（导出布尔值），该文件存储了用户的身份验证状态，并且可以按预期工作，但是问题是当我登录/注册或注销时内容不会更改/重新渲染。将导出的布尔值记录在其他文件中，我发现由于某些原因它没有改变。

身份验证

import fire from './Fire';

var isAuth = false;
fire.auth().onAuthStateChanged(
    function (user) {
        if (user) {
            isAuth = true;
            console.log('Authed');
        } else {
            isAuth = false
            console.log('Not Auth');
        }
    }
);

export default isAuth;

然后是 Router.js

    import React, { Component } from 'react';
    import { Route, Switch, Redirect } from "react-router-dom";
    import Login from './components/common/Navbar/Login/Login';
    import Register from './components/common/Navbar/Register/Register';
    import Home from './components/common/Home/Home';
    import isAuth from './config/isAuth';
    import All from './components/All/All';
    import PrivateRoute from './config/PrivateRoute';

    class Router extends Component {
        constructor(props) {
            super(props);
            this.state = ({
                isAuth: isAuth
            });
        }

        componentWillMount() {
            this.setState = ({
                isAuth: isAuth
            });
        }

        render() {
            console.log('Router.js => ' + this.state.isAuth)
            return (
                <div>
                    <PrivateRoute exact path='/' component={Home} />
                    <PrivateRoute exact path='/register' component={ 
     this.state.isAuth ? Home : Register} />
                    <PrivateRoute exact path='/all' component={All} />
                    <Route exact path='/login' component={ this.state.isAuth ? Home : Login} />
                </div>
            );
        }
    }

export default Router;

最后是 PrivateRoute 组件，该组件是我从互联网上某人的代码中获取的。

import React from 'react';
import { Redirect, Route } from "react-router-dom";

const PrivateRoute = ({ component: Component, ...rest }, isLogged) => (
    <Route {...rest} render={(props) => (
        isLogged 
            ? (<Component {...props} /> )
            : (<Redirect to={{ pathname: '/login' }} />)
    )} />
)

export default PrivateRoute;

Answer 1

我认为您的方式不会更改isAuth状态。你可以试试这个解决方案吗？我希望它能起作用

class Router extends Component {
    constructor(props) {
        super(props);
        this.state = ({
            isAuth: false
        });
    }

    componentDidMount() {
        fire.auth().onAuthStateChanged((user) => {
            if (user) {
               console.log(user);
               this.setState({ isAuth: true });
            } else {
               this.setState({ isAuth: false });
            }
        });
    }

    render() {
        console.log('Router.js => ' + this.state.isAuth)
        return (
            <div>
                <PrivateRoute exact path='/' component={Home}/>
                <PrivateRoute exact path='/register' component={ 
 this.state.isAuth ? Home : Register} />
                <PrivateRoute exact path='/all' component={All}/>
                <Route exact path='/login' component={ this.state.isAuth ? Home : Login} />
            </div>
        );
    }
}

Answer 2

为解决此问题，我对您处理身份验证状态更改的方式进行了一些更改。查看以下更改：

Router.js

react-i18next

请注意我传递给... class Router extends Component { constructor(props) { super(props); this.state = { isAuth: false }; } componentDidMount() { fire.auth().onAuthStateChanged(user => { console.log("Router user", user); if (user) { localStorage.setItem("user", user); // Note the use of localStorage this.setState({ isAuth: true }); } }); } render() { return ( <div> <Switch> <PrivateRoute exact path="/" component={Home} isLogged={this.state.isAuth} /> <PrivateRoute exact path="/register" component={this.state.isAuth ? Home : Register} isLogged={this.state.isAuth} /> <PrivateRoute exact path="/all" component={All} isLogged={this.state.isAuth} /> <Route exact path="/login" component={this.state.isAuth ? Home : Login} /> </Switch> </div> ); } } export default Router;组件的isLogged道具，这确保可以从PrivateRoute组件中访问当前身份验证状态。我还使用了localStorage来保留身份验证状态。

PrivateRoute.js

PrivateRoute

您会注意到，我使用... const PrivateRoute = ({ component: Component, ...rest }, isLogged) => ( <Route {...rest} render={props => rest.isLogged ? ( <Component {...props} /> ) : ( <Redirect to={{ pathname: "/login" }} /> ) } /> ); export default PrivateRoute;而不是rest.isLogged参数，由于某种原因，该参数始终未定义。 isLogged已从rest.isLogged组件传递到此组件。

Home.js

Router

在class Home extends Component { constructor(props) { super(props); this.state = { isAuth: localStorage.getItem("user") || false }; console.log("Home.js => " + this.state.isAuth); } render() { return ( <div> {/* If logged => Welcome ; else => Login */} {this.state.isAuth ? <Welcome /> : <Login />} </div> ); } } export default Home;组件中，我删除了Home导入，因为它不起作用，然后设置了状态的isAuth以便从localStorage中获取用户。

从现在开始，我确定您可以弄清楚应用程序的其余部分。和平。

单击下面的按钮以查看代码和框

反应路由器身份验证

2 个答案: