时间戳

首页 > 解决方案 > 使用 React 在 Loopback 中设置访问令牌

node.js - 使用 React 在 Loopback 中设置访问令牌

问题描述

我是 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();
    }
}

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

标签： node.jsreactjsloopback

解决方案

试试这个代码。

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 中并在任何地方访问。

推荐阅读