刷新页面时是否不想返回登录名？

Question

我在应用程序中管理身份验证时遇到问题，它实际上可以正常工作，但是问题是，当我刷新页面时，即使没有注销，我也被重定向到登录页面！这是路线页面的代码：

export const fakeAuth = {
  isAuthenticated: false,
  authenticate(cb) {
    this.isAuthenticated = true
    setTimeout(cb, 1000)
  },
  signout(cb) {
    this.isAuthenticated = false
    setTimeout(cb, 1000)
  }
}

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    fakeAuth.isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }} />
  )} />
)

ReactDOM.render(
  <Router history={hist}>
    <Switch>
      <Route path="/login" component={Login} />
      <PrivateRoute path="/admin" component={AdminLayout} />
      <Redirect to="/admin/dashboard" />
    </Switch>
  </Router>,
  document.getElementById("root")
);

这是登录组件的代码：

export class Login extends Component {
    state = {
        email: '',
        password: '',
        redirectToReferrer: false,
    }

    async login() {
        const email = this.state.email
        const password = this.state.password
        await fakeAuth.authenticate(() => {
            this.setState({
                redirectToReferrer: true
            })
        })

        /*axios.post(`${API_URL}login`, { email, password })
            .then(async (response) => {
                this.setState({
                    redirectToReferrer: true
                })
                //alert(response.data.admin.email + " est connecté !")
                           })*/
    }

    render() {
        const { from } = this.props.location.state || { from: { pathname: '/admin' } }
        console.log(from)
        if (this.state.redirectToReferrer === true) {
            return <Redirect to={from} />
        }
        return (
            <>
                <PanelHeader size="sm" />
                <div className="content">
                    <Row>
                        <Col md="3"></Col>
                        <Col md="6">
                            <Card>
                                <CardHeader>
                                    <h1 className="title"
                                        style={{ textAlign: "center" }}
                                    >Login</h1>
                                </CardHeader>
                                <CardBody>
                                    <Form>
                                        <Row>
                                            <Col md="12">
                                                <FormGroup>
                                                    <h6>Email</h6>
                                                    <Input
                                                        placeholder="Email"
                                                        type="email"
                                                        required
                                                        onChange={(e) => {
                                                            var email = e.target.value
                                                            this.setState({ email: email })
                                                        }}
                                                    />
                                                </FormGroup>
                                            </Col>
                                        </Row>
                                        <Row>
                                            <Col md="12">
                                                <FormGroup>
                                                    <h6>Mot de passe</h6>
                                                    <Input
                                                        placeholder="Mot de passe"
                                                        type="password"
                                                        onChange={(e) => {
                                                            var password = e.target.value
                                                            this.setState({ password: password })
                                                        }}
                                                    />
                                                </FormGroup>
                                            </Col>
                                        </Row>
                                        <Row>
                                            <Col md="12">
                                                <FormGroup style={{ left: "40%" }}>
                                                    <Button outline color="info" size="lg"
                                                        onClick={this.login.bind(this)} className="btn-round">Login</Button>
                                                </FormGroup>
                                            </Col>
                                        </Row>
                                    </Form>
                                </CardBody>
                            </Card>
                        </Col>
                        <Col md="3"></Col>
                    </Row>
                </div>
            </>
        )
    }
}

任何想法，我该怎么办？

Answer 1

您需要将经过身份验证的状态保存在某处，并在加载应用程序时对其进行检查。 React是一个前端框架，如果您重新加载您的应用程序，则它将返回默认状态，因为该框架无法通过重新加载来保存持久状态，因此就好像您是第一次显示您的应用程序。您可以在几个不同的位置保存身份验证状态，但最简单的位置是localStorage或cookie。

通过身份验证后，您可以像这样保存到localStorage：

async login() {
    const email = this.state.email
    const password = this.state.password

    await fakeAuth.authenticate(() => {
        //Set an item to browsers localStorage
        localStorage.setItem("Auth", "Your auth state here");

        this.setState({
            redirectToReferrer: true
        })
    })
}

然后您可以在加载应用程序时检查localStorage，以查看用户是否以这种方式登录：

localStorage.getItem('Auth');

您可以在Browsers LocalStorage此处了解有关浏览器的本地存储信息>

FYI：我意识到您处于设置身份验证的开始阶段，但是通常您会从后端传递身份验证令牌或会话令牌，然后检查每个路由的令牌以确保用户已登录。用户在前端登录非常不安全。每个路由都应使用某种类型的身份验证措施进行保护。您可能需要研究Json Web令牌或类似的东西。然后，您可以将令牌传递到前端，并将该令牌保存到localStoage。然后，在您的应用加载时，您可以检查此令牌以查看用户是否已通过身份验证。