REACTJS 和 API 将 Api 的值传递给另一个页面

Question

我真的需要帮助，因为我对 reactjs 完全陌生。如何维护整个页面的登录用户？就像一个会话。代码显示了我登录时调用的数据。我真的迷失了这里的反应。

当凭据为真时，结果如下

{userId: 1, firstname: "Jeff", middlename: null, lastname: "Geli", positionId: 1, …}
userId: 1
firstname: "Jeff"
middlename: null
lastname: "Geli"
positionId: 1
token: "eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJMb2dnZWRVc2VyIjoie1wiVXNlcklkXCI6MSxcIkZpcnN0bmFtZVwiOlwiSmVmZlwiLFwiTWlkZGxlbmFtZVwiOm51bGwsXCJMYXN0bmFtZVwiOlwiR2VsaVwiLFwiUG9zaXRpb25JZFwiOjEsXCJUb2tlblwiOm51bGx9IiwiZXhwIjoxNTc5NzU5MzI5LCJpc3MiOiJzbWVzay5pbiIsImF1ZCI6InJlYWRlcnMifQ.xXPW0ijBdULuMBfhFGyL1qF1bA--FzG64jEJVMQZWY8"
__proto__: Object

    import React from 'react';
    import { Link, withRouter } from 'react-router-dom';
    import { PageSettings } from './../../config/page-settings.js';
    import bg from '../../assets/login-bg-17.jpg';
    import axios from "axios";


    class LoginV2 extends React.Component {
        static contextType = PageSettings;

        constructor(props) {
            super(props);

            //credentials for login

            this.state = {
                username: '',
                password: '',
            };

            this.handleSuccess = this.handleSuccess.bind(this);
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
        }

        componentDidMount() {
            this.context.handleSetPageSidebar(false);
            this.context.handleSetPageHeader(false);
        }

        componentWillUnmount() {
            this.context.handleSetPageSidebar(true);
            this.context.handleSetPageHeader(true);
        }


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

        handleSuccess(data) {

            alert("Logged IN");
            this.props.history.push('dashboard/v2');

        }



        //When submit button is clicked, fetch API 

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

            //fetch API, method POST

            const getCred = await fetch('/api/login', {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'ApiKey': "Secret"
            },
            method: "POST",
            body: JSON.stringify({
                username: this.state.username,
                password: this.state.password

            }),
            });


            const data = await getCred.json();

            if (getCred.status == 400) {
                alert(data);
            } else {
                this.handleSuccess(getCred);
            }

            console.log(data);

        }




        render() {
            return (
                <React.Fragment>
                    <div className="login-cover">
                        <div className="login-cover-image" style={{backgroundImage:'url('+ bg +')'}} >

                        </div>
                        <div className="login-cover-bg"></div>
                    </div>

                    <div className="login login-v2">
                        <div className="login-header">
                            <div className="brand">
                                <span className="logo"></span> <b>Tek</b> Teach
                                <small>Leraning Management System</small>
                            </div>
                            <div className="icon">
                                <i className="fa fa-lock"></i>
                            </div>
                        </div>
                        <div className="login-content">
                            <form className="margin-bottom-0" onSubmit={this.handleSubmit}>
                                <div className="form-group m-b-20">
                                    <input type="text" className="form-control form-control-lg" placeholder="Username" name="username" value={this.state.username} onChange={this.handleChange} required />
                                </div>
                                <div className="form-group m-b-20">
                                    <input type="password" className="form-control form-control-lg" placeholder="Password" name="password" value={this.state.password} onChange={this.handleChange} required />
                                </div>

                                <div className="login-buttons">
                                    <button type="submit" className="btn btn-success btn-block btn-lg" onClick={this.login}>Sign me in</button>
                                </div>

                            </form>
                        </div>
                    </div>
                </React.Fragment>
            )
        }
    }

    export default withRouter(LoginV2);

Answer 1

您可以使用sessionStorage 或localStorage 来存储令牌，然后检查它，如果已设置，则保持用户登录，否则注销用户。

在用户登录后设置会话

 if (token) {
    localStorage.setItem('session', JSON.stringify(token));
 }

检查用户是否登录

let user = localStorage.getItem('session');
if (user) {
    console.log('Valid session');
} else {
    console.log('Not valid session');
}

注销时清除值

let user = localStorage.getItem('session');
if (user) {
    localStorage.removeItem();
}

在提供的代码中添加逻辑

 async handleSubmit(event) {
      // .... Other code 
        const data = await getCred.json();
        if (data.status == 400) {
            alert(data);
        } else {
            this.handleSuccess(data);
        }
        console.log(data);
    }
//Set your token in handleSuccess method

 handleSuccess(data) {
        alert("Logged IN");
        if (data.token) {
            localStorage.setItem('session', JSON.stringify(data.token));
        }
        this.props.history.push('dashboard/v2');
    }