将数据从 fetch 传递到另一个组件

Question

我有一个 Login 组件，它有一个带有用户数据输入的表单，我有一个带有 fetch 的 onFormSubmit 方法。问题是我不知道如何将令牌传递给另一个组件（它在那里，我可以 console.log 它）。我想将令牌传递给另一个组件的原因是另一个组件正在验证用户是否已登录并通过检测令牌（null = 用户没有登录并将他重定向到登录页面，否则转到受保护的页面）

我的 login.js 组件

class Login extends React.Component() {
    constructor() {
        super();
        this.state = {
            email: '',
            password: '',
        };
    }

    onInputChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value
        });
    };

    onFormSubmit = (e) => {
        e.preventDefault();
        fetch('http://localhost:3001/user/login', {
            method: 'POST',
            body: JSON.stringify({
                email: this.state.email,
                password: this.state.password
            }),
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then( res => {
                if( res.status === 200){
                    this.props.history.push('/MyPlaces');
                } else {
                    const error = new Error(res.error);
                    throw error;
                }
            })
            .catch(err => {
               console.error(err);
               alert('Error login in please try again!');
            });
    };

    render() {
        return (
            <div className="loginPanel">
                <form onSubmit={this.onFormSubmit}>
                    <label>Email
                    <input type="text"
                           id="email"
                           value={this.state.email}
                           onChange={this.onInputChange}
                    />
                    </label>
                    <label>Password
                    <input type="text"
                           id="password"
                           value={this.state.password}
                           onChange={this.onInputChange}/>
                    </label>
                    <input type="submit" value="Submit" />
                </form>
            </div>
        );
    };
}

export default Login;

我的认证组件

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

export default function withAuth(ComponentToProtect, props) {
    return class extends Component {
        constructor() {
            super();
            this.state = {
                loading: true,
                redirect: false
            };
        }

        componentDidMount() {
            fetch('')
                .then(res => {
                if( res.status === 200) {
                    this.setState({ loading: false});
                } else {
                    const error = new Error(res.error);
                    throw error;
                }
            })
                .catch(err => {
                    console.error(err);
                    this.setState({ loading: false, redirect: true });
                })
        }

        render() {
            const { loading, redirect } = this.state;
            if( loading ){
                return null;
            }
            if( redirect ){
                return <Redirect to="/Login" />;
            }

            return (
                <React.Fragment>
                    <ComponentToProtect {...this.props}/>
                </React.Fragment>
            );
        }
    }
}

我知道身份验证组件中的 fetch 没有任何内容，我认为我应该发出另一个 api 请求（与登录组件中相同，然后在 fetch 之后调用

.then(res => res.json()).then(res => {
    let token = res.token;
    console.log("token: ", token);
});

但我认为这似乎不是一个好主意。您能否给我一些指导，我该怎么做？

Answer 1

您可以简单地使用localStorage.setItem('token-name', token); 在获取后存储令牌。然后您可以在所有组件中使用localStorage.getItem('token-name') 检索它。如果getItem 返回null，那么您可以简单地重定向到登录。

对于注销，您只需将令牌值更新为null。

登录组件

fetch('http://localhost:3001/user/login', {
    method: 'POST',
    body: JSON.stringify({
        email: this.state.email,
        password: this.state.password
    }),
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(res => {
    if( res.status === 200){
        localStorage.setItem('token', res.token); //storing the token in localStorage.
        this.props.history.push('/MyPlaces');
    } else {
        const error = new Error(res.error);
        throw error;
    }
})
.catch(err => {
   console.error(err);
   alert('Error login in please try again!');
});

身份验证组件

componentDidMount() {
   let token = localStorage.getItem('token');  //retriving the token from localStorage
   if(token === null){
       this.setState({ loading: false, redirect: true });
   }        
}

希望这会对你有所帮助。