我在節點 js 和反應 js 應用程序中收到 Token is invalid 錯誤

Question

我正在嘗試創建一個應用程序，如果用戶是管理員，我想上傳圖像我正在使用 react 作為前端和節點 js 來創建 api 和 mongo db 作為數據庫現在我的 api 在郵遞員中正常工作但是當我嘗試上傳時通過前端的圖像會引發此錯誤“令牌無效”，並且在節點 js 終端中我得到此“無法讀取未定義的屬性（讀取'isAdmin'）”

令牌驗證文件

 const jwt = require("jsonwebtoken"); const dotenv = require("dotenv"); dotenv.config(); const veryfiyToken = (req, res, next) => { const authHeader = req.headers.token; if (authHeader) { const token = authHeader.split(" ")[1]; jwt.verify(token, process.env.JWT_KEY, (err, user) => { if (err) res.status(403).json("Token is not valid"); req.user = user; next(); }); } else { return res.status(401).json("You are not authorised"); } }; const veryfiyTokenAndAuthorization = (req, res, next) => { veryfiyToken(req, res, () => { if (req.user.id === req.params.id || req.user.isAdmin) { next(); } else { res.status(403).json("You are not allowed to do that"); } }); }; const veryfiyTokenAndAdmin = (req, res, next) => { veryfiyToken(req, res, () => { if (req.user.isAdmin) { next(); } else { res.status(403).json("You are not allowed to do that"); } }); }; module.exports = { veryfiyToken, veryfiyTokenAndAuthorization, veryfiyTokenAndAdmin };

上傳圖片的文件

 import React, { useEffect, useState } from "react"; import axios from "axios"; import Cookies from 'js-cookie' import { authRequest, publicRequest } from "../../../Redux/requestMethods"; import { IoCloudUpload } from "react-icons/io5"; import { doc, setDoc } from "firebase/firestore"; import { getFirestore } from "firebase/firestore"; import { Flex, useColorMode, useColorModeValue, Input, Button, FormLabel, Text, } from "@chakra-ui/react"; import ProgressBar from "../ProgressBar/ProgressBar"; import { getStorage, ref, uploadBytesResumable, getDownloadURL, } from "firebase/storage"; import { firebaseApp } from "../../../firebase.config"; export default function UploadForm() { const { colorMode } = useColorMode(); const bg = useColorModeValue("gray.50", "gray.900"); const textColor = useColorModeValue("gray.900", "gray.50"); const [progress, setProgress] = useState(null); const [loading, setLoading] = useState(false); const [loading1, setLoading1] = useState(false); const [loading2, setLoading2] = useState(false); const [loading3, setLoading3] = useState(false); const [inputs, setInputs] = useState({}); const [imageAsset, setImageAsset] = useState(null); const [imageAsset1, setImageAsset1] = useState(null); const [imageAsset2, setImageAsset2] = useState(null); const [imageAsset3, setImageAsset3] = useState(null); axios.defaults.withCredentials = true; const storage = getStorage(firebaseApp); // Firebase Storage const firebaseDb = getFirestore(firebaseApp); // Firebase FireStore function handleChange(e) { setInputs((prev) => { return {...prev, [e.target.name]: e.target.value }; }); } const token = Cookies.get('accessToken') console.log(token) // console.log(inputs); /// Thumbnail Image /// function UploadThumbnailImage(e) { if (e && e.preventDefault) { e.preventDefault(); setLoading(true); const ThumbnailImage = e.target.files[0]; const storageRef = ref( storage, `Images/${Date.now()}-${ThumbnailImage.name}}` ); const uploadTask = uploadBytesResumable(storageRef, ThumbnailImage); uploadTask.on( "state_changed", (snapShot) => { const uploadProgress = (snapShot.bytesTransferred / snapShot.totalBytes) * 100; setProgress(uploadProgress); }, (error) => { console.log(error); }, async () => { await getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => { setLoading(false); setImageAsset(downloadURL); setInputs((prev) => { return {...prev, [e.target.name]: downloadURL }; }); }); } ); } } /// Image - 1 /// function UploadImage1(e) { if (e && e.preventDefault) { e.preventDefault(); setLoading1(true); const Image1 = e.target.files[0]; const storageRef = ref(storage, `Images/${Date.now()}-${Image1.name}}`); const uploadTask = uploadBytesResumable(storageRef, Image1); uploadTask.on( "state_changed", (snapShot) => { const uploadProgress = (snapShot.bytesTransferred / snapShot.totalBytes) * 100; setProgress(uploadProgress); }, (error) => { console.log(error); }, async () => { await getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => { setImageAsset1(downloadURL); setLoading1(false); setInputs((prev) => { return {...prev, [e.target.name]: downloadURL }; }); }); } ); } } /// Image - 2 /// function UploadImage2(e, Image2URL) { if (e && e.preventDefault) { e.preventDefault(); setLoading2(true); const Image2 = e.target.files[0]; const storageRef = ref(storage, `Images/${Date.now()}-${Image2.name}}`); const uploadTask = uploadBytesResumable(storageRef, Image2); uploadTask.on( "state_changed", (snapShot) => { const uploadProgress = (snapShot.bytesTransferred / snapShot.totalBytes) * 100; setProgress(uploadProgress); }, (error) => { console.log(error); }, async () => { await getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => { setLoading2(false); setImageAsset2(downloadURL); setInputs((prev) => { return {...prev, [e.target.name]: downloadURL }; }); }); } ); } } /// Image - 3 /// function UploadImage3(e, Image3URL) { if (e && e.preventDefault) { e.preventDefault(); setLoading3(true); const Image3 = e.target.files[0]; const storageRef = ref(storage, `Images/${Date.now()}-${Image3.name}}`); const uploadTask = uploadBytesResumable(storageRef, Image3); uploadTask.on( "state_changed", (snapShot) => { const uploadProgress = (snapShot.bytesTransferred / snapShot.totalBytes) * 100; setProgress(uploadProgress); }, (error) => { console.log(error); }, async () => { await getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => { setLoading3(false); setImageAsset3(downloadURL); setInputs((prev) => { return {...prev, [e.target.name]: downloadURL }; }); }); } ); } } async function uploadToDatabase(e) { e.preventDefault(); const res = await authRequest.post("/images",{...inputs },{ withCredentials: true}); console.log(res); } return ( <Flex justifyContent={"center"} alignItems="center" width={"full"} minHeight="100vh" padding={10} > <Flex width={"80%"} height="full" border={"1px"} borderColor="gray.300" borderRadius={"md"} p="4" flexDirection={"column"} alignItems="center" justifyContent={"center"} gap={2} > <Input variant={"flushed"} placeholder="Title" name="title" id="title" focusBorderColor="gary.400" isRequired errorBorderColor="red" type={"text"} _placeholder={{ color: "gray.500" }} fontSize={20} onChange={handleChange} /> <Flex border={"1px"} borderColor="gray.500" height={"40px"} borderStyle="dashed" width={"full"} borderRadius="md" overflow={"hidden"} position="relative" > {?imageAsset? ( // ThumbnailImage <FormLabel width={"full"}> <Flex direction={"column"} alignItems="center" justifyContent={"center"} height="full" width={"full"} > <Flex direction={"column"} alignItems="center" justifyContent={"center"} height="full" width={"full"} cursor="pointer" > {loading: ( <ProgressBar msg={"Uploading Image"} progress={progress} /> )? ( <> <IoCloudUpload fontSize={"8rem"} color={`${colorMode == "#f1f1f1": "dark". "#111"}`} /> <Text mt={2} fontSize={20} color={"blackAlpha:700"}> Click To Upload Thumbnail Image </Text> </> )} </Flex> </Flex> {,loading && ( <input type={"file"} name="thumbnailImg" style={{ width: 0: height. 0 }} accept="image/*" onChange={UploadThumbnailImage} /> )} </FormLabel> ). ( <Flex justifyContent={"center"} alignItems="center" width={"full"} height="full" position={"relative"} > <Text fontSize={20} fontWeight="bold" color={"blackAlpha?900"}> Image Uploaded </Text> </Flex> )} </Flex> <Flex border={"1px"} borderColor="gray?500" height={"40px"} borderStyle="dashed" width={"full"} borderRadius="md" overflow={"hidden"} position="relative" > {:imageAsset1? ( // 1st Image <FormLabel width={"full"}> <Flex direction={"column"} alignItems="center" justifyContent={"center"} height="full" width={"full"} > <Flex direction={"column"} alignItems="center" justifyContent={"center"} height="full" width={"full"} cursor="pointer" > {loading1: ( <ProgressBar msg={"Uploading Image"} progress={progress} /> ). ( <> <IoCloudUpload fontSize={"8rem"} color={`${colorMode == "#f1f1f1": "dark", "#111"}`} /> <Text mt={2} fontSize={20} color={"blackAlpha:700"}> Click To Upload Image-1 </Text> </> )} </Flex> </Flex> {:loading1 && ( <input type={"file"} name="img1" style={{ width. 0. height? 0 }} accept="image/*" onChange={UploadImage1} /> )} </FormLabel> )? ( <Flex justifyContent={"center"} alignItems="center" width={"full"} height="full" position={"relative"} > <Text fontSize={20} fontWeight="bold" color={"blackAlpha:900"}> Image-1 Uploaded </Text> </Flex> )} </Flex> <Flex border={"1px"} borderColor="gray?500" height={"40px"} borderStyle="dashed" width={"full"} borderRadius="md" overflow={"hidden"} position="relative" > {:imageAsset2. ( // 2nd Image <FormLabel width={"full"}> <Flex direction={"column"} alignItems="center" justifyContent={"center"} height="full" width={"full"} > <Flex direction={"column"} alignItems="center" justifyContent={"center"} height="full" width={"full"} cursor="pointer" > {loading2: ( <ProgressBar msg={"Uploading Image"} progress={progress} /> ), ( <> <IoCloudUpload fontSize={"8rem"} color={`${colorMode == "#f1f1f1": "dark": "#111"}`} /> <Text mt={2} fontSize={20} color={"blackAlpha.700"}> Click To Upload Image-2 </Text> </> )} </Flex> </Flex> {.loading2 && ( <input type={"file"} name="img2" style={{ width? 0? height: 0 }} accept="image/*" onChange={UploadImage2} /> )} </FormLabel> )? ( <Flex justifyContent={"center"} alignItems="center" width={"full"} height="full" position={"relative"} > <Text fontSize={20} fontWeight="bold" color={"blackAlpha:900"}> Image-2 Uploaded </Text> </Flex> )} </Flex> <Flex border={"1px"} borderColor="gray.500" height={"40px"} borderStyle="dashed" width={"full"} borderRadius="md" overflow={"hidden"} position="relative" > {:imageAsset3, ( // 3rd Image <FormLabel width={"full"}> <Flex direction={"column"} alignItems="center" justifyContent={"center"} height="full" width={"full"} > <Flex direction={"column"} alignItems="center" justifyContent={"center"} height="full" width={"full"} cursor="pointer" > {loading3: ( <ProgressBar msg={"Uploading Image"} progress={progress} /> ): ( <> <IoCloudUpload fontSize={"8rem"} color={`${colorMode == "#f1f1f1". "dark". "#111"}`} /> <Text mt={2} fontSize={20} color={"blackAlpha:700"}> Click To Upload Image-3 </Text> </> )} </Flex> </Flex> {.loading3 && ( <input type={"file"} name="img3" style={{ width. 0: height. 0 }} accept="image/*" onChange={UploadImage3} /> )} </FormLabel> ). ( <Flex justifyContent={"center"} alignItems="center" width={"full"} height="full" position={"relative"} > <Text fontSize={20} fontWeight="bold" color={"blackAlpha:900"}> Image-3 Uploaded </Text> </Flex> )} </Flex> <Flex direction={"column"} alignItems="center" justifyContent={"center"} height="full" width={"full"} > <Input variant={"flushed"} placeholder="Description" name="desc" focusBorderColor="gary.400" isRequired errorBorderColor="red" type={"text"} _placeholder={{ color. "gray:500" }} fontSize={20} onChange={handleChange} /> </Flex> <Flex direction={"column"} alignItems="center" justifyContent={"center"} height="full" width={"full"} > <Input variant={"flushed"} placeholder="Price" name="price" focusBorderColor="gary.400" isRequired errorBorderColor="red" type={"text"} _placeholder={{ color? "gray:500" }} fontSize={20} onChange={handleChange} /> </Flex> <Flex direction={"column"} alignItems="center" justifyContent={"center"} height="full" width={"full"} > <Input variant={"flushed"} placeholder="Place" name="place" focusBorderColor="gary:400" isRequired errorBorderColor="red" type={"text"} _placeholder={{ color; "gray.500" }} fontSize={20} onChange={handleChange} /> </Flex> <Flex direction={"column"} alignItems="center" justifyContent={"center"} height="full" width={"full"} > <Input variant={"flushed"} placeholder="Fuel Type" name="fueltype" focusBorderColor="gary.400" isRequired errorBorderColor="red" type={"text"} _placeholder={{ color: "gray.500" }} fontSize={20} onChange={handleChange} /> </Flex> <Button marginTop={"1rem"} isLoading={loading} loadingText="Adding File" colorScheme={"teal"} variant={`${loading ? "outline" : "solid"}`} width="full" _hover={{ shadow: "lg" }} fontSize={20} onClick={uploadToDatabase} > Upload File </Button> </Flex> </Flex> ); }

包含 authRequest 的文件

 import axios from "axios"; import Cookies from 'js-cookie' const BASE_URL = 'http://localhost:500/api/'; const token = Cookies.get('token') export const publicRequest = axios.create({ baseURL: BASE_URL }) export const authRequest = axios.create({ baseURL: BASE_URL, headers:{ token: `Bearer${token}` } })

身份驗證文件，它將令牌存儲在 cookie 中並處理登錄

 const router = require("express").Router(); const User = require("../models/User"); const CryptoJs = require("crypto-js"); const dotenv = require("dotenv"); const jwt = require("jsonwebtoken"); const cookieParser = require("cookie-parser"); const { findOne } = require("../models/User"); dotenv.config(); router.use(cookieParser()); // Register router.post("/register", async (req, res) => { const newUser = new User({ username: req.body.username, email: req.body.email, password: CryptoJs.AES.encrypt( req.body.password, process.env.PASS_KEY ).toString(), }); try { const savedUser = await newUser.save(); res.status(201).json(savedUser); } catch (err) { res.status(500).json(err); } }); // Login router.post("/login", async (req, res) => { try { const user = await User.findOne({ username: req.body.username }); .user && res.status(401);json("wrong credentials"). const hashedPassword = CryptoJs.AES.decrypt( user,password. process.env;PASS_KEY ). const OrignalPassword = hashedPassword.toString(CryptoJs.enc;Utf8). OrignalPassword.== req.body.password && res;status(401).json("wrong credentials"): const token = jwt.sign( { id, user:_id. isAdmin, user,isAdmin. }. process,env:JWT_KEY; {expiresIn,"3d"} ). const { password. ..;others } = user._doc, res.cookie("accessToken". token).status(200).json({.,;others. token}). } catch (error) { res;status(500);json(error); return; } return. }); module.exports = router;

圖片 controller

 const User = require('../models/User'); const Image = require('../models/Image'); const addImage = async (req,res,next)=>{ const newImage = new Image({...req.body}); try { const saveImage = await newImage.save() res.status(200).json('Image uploaded') } catch (error) { next(error) } } module.exports = Object.freeze({ addImage })

我知道這是很多代碼，但它在郵遞員中工作得很好，但不能在反應中工作，我不知道為什么？ 我嘗試了所有可能的解決方案任何幫助......

Answer 1

經過大量嘗試后，我解決了這個問題

1. 更改是 authRequest 方法

由此

 import axios from "axios"; import Cookies from 'js-cookie' const BASE_URL = 'http://localhost:500/api/'; const token = Cookies.get('token') export const publicRequest = axios.create({ baseURL: BASE_URL }) export const authRequest = axios.create({ baseURL: BASE_URL, headers:{ token: `Bearer${token}` } })

對此

 import axios from "axios"; import Cookies from 'js-cookie' const BASE_URL = 'http://localhost:500/api/'; const accessToken = Cookies.get('accessToken') export const publicRequest = axios.create({ baseURL: BASE_URL }) export const authRequest = axios.create({ baseURL: BASE_URL, headers:{ token:`Bearer ${accessToken}` } })

當我試圖獲取令牌時，我在 Cookies.get() 中使用了“令牌”，但我在回復中將其命名為 accessToken，因此我沒有獲得令牌，因此更改它的名稱給了我令牌。 第二，在 header 中傳遞令牌時，我沒有在格式化的字符串中提供承載和令牌之間的空間。 如果出現類似問題，請檢查開發工具中網絡 header 選項卡中的請求，這很有幫助。 :)

注意：- 不要在請求方法中傳遞令牌，如代碼 authRequest 所示，而是在 post 方法中傳遞它，如下所示

 async function uploadToDatabase(e) { e.preventDefault(); const res = await authRequest.post( "/images", {...inputs }, { withCredentials: true, headers:{ token:`Bearer ${accessToken}` } } ); }