react中外部链接重定向时如何保存和传递用户名和密码答案

【问题标题】：How to save and pass username and password when redirect in external link in reactreact中外部链接重定向时如何保存和传递用户名和密码
【发布时间】：2019-09-12 07:52:02
【问题描述】：

我做了一个登录页面，登录后必须重定向到外部链接，如何保存用户并通过登录？我需要点击按钮登录后我的用户登录外部网站

我用

"axios": "^0.18.0","react": "^16.8.5",
"react-dom": "^16.8.5",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",

        e.preventDefault()
        axios.defaults.withCredentials = true;


        const bodyParameters = {
            params: {
                username: this.state.username,
                password: this.state.password,
                appType: this.state.appType
            }
        }


        axios.get(
            'http://localhost:8080/test/api',
            bodyParameters,

            {
                withCredentials: true
            }
        ).then((response) => {
            if (response.data.hasError !== true) {
                const token = localStorage.setItem('token', response.data.token)



                axios.defaults.headers['Authorization'] = "Bearer " + localStorage.getItem('token');

                window.location = 'http://localhost:8082/test'
                return response.data

            } else {
             console.log('error')
            }


        }).catch((error) => {

        });

【问题讨论】：

这最好委托给服务器。在客户端管理这个太不安全了。但是，一种方法是使用 localStorage（假设它在同一个选项卡中），另一种方法是使用 cookie。

标签： reactjs react-router axios

【解决方案1】：

您可以使用本地存储 -

       axios({
          method: 'post',
          url: 'http://localhost:4000/login',
        data: {
            user_email: formData.user_email.value,
            user_password: formData.user_password.value,
        }
    }).then(res => {
        if (res && !res.data.error) {
            localStorage.setItem('sessionID', res.data.data.sessionID);
            localStorage.setItem('token', res.data.data.token);
            localStorage.setItem('sessionEmail', res.data.data.sessionEmail);
            localStorage.setItem('notify', JSON.stringify({msg: res.data.message, type: 'success'}));
            this.props.history.push("/testlist");
        } else if (res.data.error) {
            localStorage.setItem('notify', JSON.stringify({msg: res.data.message, type: 'error'}));
        }else if ( !res.data.error) {
            localStorage.removeItem('token', res.data.data.token);
            localStorage.setItem('notify', JSON.stringify({msg: res.data.message, type: 'error'}));
        } else {
            localStorage.setItem('notify', JSON.stringify({msg: res.data.message, type: 'error'}));
        }
    }, err => {
        console.log(err);
        localStorage.setItem('notify', JSON.stringify({msg: '500 api error', type: 'error'}));
    });
}

【讨论】：

如何重定向？使用 window.location ?
this.props.history.push 用于 window.location