如何傳遞我可以訪問 API 的身份驗證令牌？（反應問題）

Question

我正在制作一個簡單的應用程序，用於使用此 api借出手機，但由於請求需要身份驗證令牌，因此我無法訪問手機項目。 所以我試圖 output 這個

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

了解有關如何傳遞身份驗證令牌的任何建議，因為我從未這樣做過這里是完整的代碼

Answer 1

令牌的想法是，一旦用戶成功登錄（POST 請求），他就會從服務器收到一個令牌（登錄的響應）。

一旦用戶擁有了他的令牌（最好存儲在瀏覽器的localStorage中，以便無論瀏覽器刷新都保存它），他就會將此令牌與每個請求一起傳遞給需要身份驗證的服務器。

即，對於 JWT 令牌 header 是：

Authorization: Bearer [token]