使用 React 在 Loopback 中设置访问令牌答案

【问题标题】：Set access token in Loopback with React使用 React 在 Loopback 中设置访问令牌
【发布时间】：2019-12-16 21:50:25
【问题描述】：

我是 Loopback 和 Reactjs 的新手。我想构建一个具有用户登录、注销功能的应用程序。但是，我很困惑如何在 Loopback 中使用反应前端设置访问令牌并进一步访问其他方法。我正在使用 Loopback 提供的用户模型。

到目前为止，我已经编写了这个小代码，用于访问登录，但是我很困惑如何进一步设置访问令牌以进行身份验证。

import React, {Component} from 'react';
import axios from 'axios';

class Login extends Component{

    constructor(props) {
        super(props);
        this.state = {
            "username": ""
            }
        }

    login(newUser) {
        axios.request({
            method:'post',
            url:'http://localhost:3000/api/Users/login',
            data: newUser
          }).then(response => {
            this.props.history.push('/');
          }).catch(err => console.log(err));
    }

    onSubmit(e){
        const newUser = {
            username: this.refs.username.value,
            password: this.refs.password.value
        }
        this.login(newUser);
        e.preventDefault();
    }
}

这个代码 sn-p 正如预期的那样没有设置访问令牌，所以我想知道我是否需要一些额外的中间件或其他东西来做。

【问题讨论】：

是否 auth0.login() 或 window.login() 将用户导航到身份验证页面并在成功时重定向回来？
response如果成功应该返回token，你可以通过response.id获取访问token
@skyboyer 哦，我很抱歉，实际上我试图用 Auth0 来做，但在某个地方出错了。我编辑了当前代码。

标签： node.js reactjs loopback

【解决方案1】：

试试这个代码。

login(newUser) {
        axios.request({
            method:'post',
            url:'http://localhost:3000/api/Users/login',
            data: newUser
          }).then(response => {
         localStorage.ptspotter_accessToken = response.data.id;
          localStorage.ptspotter_userId = response.data.userId
            auth0.login();
            this.props.history.push('/');
          }).catch(err => console.log(err));
          window.login();
    }

您可以将登录用户ID和令牌存储在localStorage中并在任何地方访问。

【讨论】：