繁体   English   中英

如何传递我可以访问 API 的身份验证令牌?(反应问题)

How to pass auth token that I can access API?(react question)

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在制作一个简单的应用程序,用于使用此 API借出电话,但由于请求需要身份验证令牌, 因此我无法访问电话项目。 所以我想输出这个

import React from 'react'
import { MobileContext } from './MobileContext';
import { useContext } from 'react';
import Mobile from './Mobile';
import Navbar from './Navbar';
function MobileList() {
    const { mobiles } = useContext(MobileContext);
    return (
        <div>
            <Navbar/>
         {mobiles.map((item) => (
          <Mobile
           vendor={item.vendor} 
           
          />
        ))}  
        
       
        </div>
    )
}

export default MobileList

但是在没有电话的情况下正确登录后得到这个这

这是我的上下文 api 的设置方式,但显然我无法访问电话

import React, { useState, useEffect, createContext
 
} from 'react';
import axios from 'axios';


export const MobileContext = createContext({
 mobiles: [],
  setMobiles: () => {},
  updateMobiles: () => {},
});

export default function MobileProvider(props) {
  const [mobiles, setMobiles] = useState([]);
  
  

  
  const updateMobiles = (id) => {
 
    axios
      .get('https://js-test-api.etnetera.cz/api/v1/phones')
      .then((res) => setMobiles(res.data));
  };

  useEffect(() => {
    axios
      .get('https://js-test-api.etnetera.cz/api/v1/phones')
      .then((res) => setMobiles(res.data));
      
  }, [] );

  return (
    <MobileContext.Provider value={{ mobiles, setMobiles, updateMobiles}}>
      {props.children}
    </MobileContext.Provider>
  );
}

然后是登录页面,如果你想进入电话页面,你必须通过

import React from 'react'
import axios from 'axios';
import { useState } from 'react';
import { useHistory } from "react-router-dom";
function Login() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    
   
    let history = useHistory()
    const onSubmit = (e) => {
      e.preventDefault();
      const getIn = {
      
        "login":email,
        "password":password,
        
    
      };
  
      
      axios
        .post('https://js-test-api.etnetera.cz/api/v1/login', getIn,
        {
            headers: {
                
                 'content-type': 'application/json', 
           }
        }).then((res) => {
      console.log(res.data); 
      history.push("/phones");
    })
        .catch((error) => console.log(error));
       
    };
    return (
        <div>
           <form >
         <label>email</label> <input value={email}
          onChange={(e) => setEmail(e.target.value)} type="text"/>
        <label>password</label>  <input type="text" value={password}
          onChange={(e) => setPassword(e.target.value)}/>
        <button onClick={onSubmit}>login</button>
           </form>
        </div>
    )
}

export default Login

感谢有关如何传递身份验证令牌的任何建议,因为我从未这样做过这里是完整代码

1 个回复

令牌的想法是,一旦用户成功登录(POST 请求),他就会从服务器收到一个令牌(登录的响应)。

一旦用户拥有他的令牌(最好存储在浏览器的localStorage ,以便在浏览器刷新时保留它),他将此令牌与每个请求一起传递给需要身份验证的服务器。

即,对于 JWT 令牌,标头是:

Authorization: Bearer [token]
1 如何使用 React 存储 API 身份验证令牌?

我正在尝试从我的 API 存储身份验证令牌,然后我可以使用它向另一个 API 发出 GET 请求,我的代码如下: 用户名和密码来自我的表单输入,我已成功发出 POST 请求并在我的浏览器中获得令牌,但我想将其存储在我的代码中,提前致谢:) ...

5 如何使用 react SDK 访问 auth0 令牌?

我一直在努力寻找一种在 React 应用程序中实现 auth0 的好方法。 目前我正在使用“新的”反应 SDK。 我面临的问题是,要使用此 SDK,我无法访问挂钩或组件之外的 accessToken(用于 API 调用)...我正在寻找一种方法来创建 Axios 拦截器,以便设置令牌一次而不是每个 ...

7 如何安全地将从Google OAuth生成的访问令牌传递给NodeJS REST API?

我正在创建两个应用程序:1. gmail的Chrome扩展。 2.这是IOS版本 现在,由于这两个应用程序具有相同的行为,并且广泛使用相同的Google API,因此我决定在Google Cloud Platform中为这两个应用程序创建一个项目。 现在,在创建凭据时,我的应用程序类型 ...

8 如何将我的 Auth0 权限添加到 AWS HTTP API Jwt 授权方的访问令牌的范围声明中?

我正在尝试在端点上获得一个具有范围的 AWS HTTP API JWT 授权器,以便与我的 Auth0 访问令牌愉快地工作。 JWT 授权器在访问令牌的“范围”中查找必要的范围。 我认为这是用于细粒度授权。 但是,Auth0 在“权限”数组中而不是在令牌的“范围”中返回权限。 有没有办法让我的 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM