令牌在 Reactjs 应用程序中无效答案

【问题标题】：Token is Invalid in Reactjs application令牌在 Reactjs 应用程序中无效
【发布时间】：2021-04-09 15:36:57
【问题描述】：

我尝试使用 JWT 令牌从 Reactjs 组件的后端获取列表，但收到错误消息 {"status":"Token is Invalid"}，请指导我。

我的后端 API 工作正常，登录后我的令牌保存在本地存储中。

我的前端使用的 API 代码

import {API} from "../config";
/**
*  to get about pages
*  get a single about page
*  update a about page
*  delete about page
*/
export const getAboutContent = (token) =>{
return fetch(`${API}/about/?token=${token}`, {
    method: "GET",
 })
.then(response =>{
    return response.json();      
 })
 .catch(err =>{
    console.log(err);
 });
 };

关于/index.js

const [allAboutContent, setAllAboutContent] = useState([]);

const loadAllAboutContent = () => {
  getAboutContent().then(data => {
        if(data.error){
            console.log(data.error)
        } else{
          setAllAboutContent(data.data)
        }
    });
};

useEffect(() =>{
  loadAllAboutContent();
}, [])

请帮忙。

【问题讨论】：

Why not upload images of code/errors when asking a question?
您的屏幕截图显示您请求的 URL 具有 ?token=undefined，因此您传递给 getAboutContent 的令牌是 undefined。那么，你怎么称呼getAboutContent？几乎可以肯定，问题出在您调用该函数时。
@Nick 感谢您的回复，请告诉我如何解决此问题。请指导我
你能在你实际调用getAboutContent函数的地方添加代码吗？
@Nick 先生，请检查我发布的代码...

标签： reactjs laravel

【解决方案1】：

您在没有 JWT 的情况下在 about/index.js 文件中调用 getAboutContent，因此它没有定义。只需更新您的代码以从 localStorage 读取 JWT，如下所示

const loadAllAboutContent = () => {
  // Read token from local storage
  const token = localStorage.getItem('jwt');
  // Pass to getAboutContent
  getAboutContent(token).then(data => {
    if(data.error){
        console.log(data.error)
    } else{
      setAllAboutContent(data.data)
    }
  });
};

另外，我看到您已将令牌存储为 {token: ''}。也许，您可以直接保存它。否则你必须像这样阅读它JSON.parse(localStorage.getItem('jwt')).token

【讨论】：