【问题标题】:Cookies null from front end but visible in postman前端的 cookie 为空,但在邮递员中可见
【发布时间】:2022-01-09 17:28:20
【问题描述】:

您好,我正在使用 react js 和 node js 练习 jwt 身份验证

每当用户登录时,都会在 cookie 中设置 jwt 令牌,如下所示

我只是匹配电子邮件,而不是当前专注于维护会话的密码

exports.login = async(req,res)=>{


    const u  = await User.findOne({
        where:{
            email:{
            [Op.eq]:req.body.email
        }
        }
    })
if(u!=null)
{
    
    const token = jwt.sign({_id: u.id}, process.env.JWT_SECRET)
    
    
const cookie = req.cookies.token;
console.log("I  am cookies",cookie) //shows token in postman but null when logged in from react frontend
if (cookie == undefined){
    
res.cookie('token', token, {httpOnly: true});


}

return res.status(200).json({"status":200,message:"login success"});

}else
{
    res.json({"status":400,"message":"Login Failed"})
}

}

我的检查令牌方法

exports.checkToken =async(req,res)=>
{
   
    console.log("DATA ONE: ", req.cookies.token)
    const req_token = req.cookies.token
    let auth = false;
    if(!req_token)
    {
        return res.json({"message":"Login Again"})
    }
    try{
        if(!jwt.verify(req_token,process.env.JWT_SECRET))throw 'token not valid';
        else{
            auth =true;


        }


    }catch(err)
    {
            console.log("Invalid TOken")
    }

    if(!auth)
    {
        return res.json(400).json({"message":"token verification failed"})
    }else
    {
        const data = jwt.verify(req_token,process.env.JWT_SECRET)
        console.log(data)
          User.findOne({
            where:{
                id:{
                [Op.eq]:data._id}}}).then((user)=>{
                    
                    if(!user)
                    {
                        return res.status(400).json({"error":"user not found"})
                    }
                    const {id,email}=user
                    return res.status(200).json({user:{id,email}})
                })
              
                
    }
}

我正在使用 cookie-parser 并将其定位在我的路线之前,这样就不会发生顺序冲突

我的 server.js 文件

const express = require('express');
const sequelize = require('./config/connection');
const bodyParser = require('body-parser')
    var cors = require("cors");

    var cookieParser = require("cookie-parser");
var app = express();
app.use(cookieParser())
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
app.use(cors())

app.use('/students',students)
sequelize.sync();
app.listen(port,(err,res)=>{

    console.log(`connected on port number:${port}`)
})

在我的路线文件中,我按如下方式使用我的方法

const express = require('express');
const app = express();
const router = express.Router();
const Authcontroller = require('../controllers/Authcontroller')
router.get("/verifyToken",Authcontroller.checkToken)
router.post("/login",Authcontroller.login)

所以当我点击路由以检查我的登录功能并验证身份验证令牌时进行测试,这两个东西都可以正常工作并返回 cookie,如图所示

最后,这是我的前端登录功能,在 useEffect 上,我正在检查令牌是否有效

const isAuthenticated = ()=>
{
  
  axios.get("http://localhost:3855/students/verifyToken").then((res)=>{
console.log(res)
    setUser(res.data.user)

  })
}

React.useEffect(()=>{
  isAuthenticated()
},[])

还有我的登录功能

const login = () =>
{
    var options = {
        email:userEmail
    }
    axios.post("http://localhost:3855/students/login",options).then((res)=>{
        
        if(res.data.status == 200)
        {
            console.log("redirect to home ")
        }else
        {
            console.log("redirect to login ")
        }
    }).catch((err)=>{
        console.log(err)
    })
    

    
    
}

我在从邮递员和反应前端尝试时正确设置了令牌,但是当我检索它时,我只在邮递员中得到它,而不是在反应前端。

我尝试在隐身模式和其他浏览器中进行操作,但在那里没有成功

我在 react 应用中得到的响应是

{ message: "Login Again" }

【问题讨论】:

    标签: node.js reactjs session


    【解决方案1】:

    已解决: 通过在指向后端的前端应用程序中使用代理 我加了 “代理”:“http://localhost:3085”

    之后,我删除了我的前端应用程序的 package-lock.json 文件以及 node_modules,然后安装了 npm install 之后,当我点击 url 到后端时,创建了一个代理,通过显示前端 url 隐藏我的后端 url http://localhost:3855/students/login 显示为 http://localhost:3000/students/login

    它按预期工作

    【讨论】:

      猜你喜欢
      • 2014-09-17
      • 2021-12-23
      • 2020-07-10
      • 2018-04-09
      • 2020-08-14
      • 1970-01-01
      • 2019-06-04
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多