reactjs React应用程序+ API身份验证

vm0i2vca  于 2022-12-03  发布在  React
关注(0)|答案(2)|浏览(158)

我已经设置了一个API来访问我的后端,并实现了快速会话来验证用户。
当使用Postman登录,然后访问受保护的GET请求时,它工作正常。
但我正在构建的React SPA在登录后似乎无法使用会话进行自我身份验证。
我尝试了许多我在网上找到的建议(改变CORS头,在React中使用显式cookie设置,改变我存储会话的方式,...),但似乎都没有解决这个问题。
我将尝试包括相关的代码片段:

服务器端(REST API)

会话和CORS中间件:

//Session Middleware
api.use(session({
    genid: (req) => {
        console.log('Inside session middleware');
        console.log(req.sessionID)
        return uuid()
    },
    cookie: {
        maxAge: 60000
    },
    secret:"123",
    resave:false,
    saveUninitialized:true,
        store: new MongoStore({
        mongooseConnection:db,
        clear_interval: 3600
    })
}));

// CORS
api.use(function(req,res,next){
    res.header("Access-Control-Allow-Origin", "http://localhost:3000");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Credentials", "true")
    next();
})

登录功能与护照验证:

exports.login = (req,res,next) => {
    passport.authenticate('local',(err,user,info) =>{
        //... (login handling)
    })(req,res,next);
}

// Passport Middleware
passport.use(new LocalStrategy(
    (username, password, done) => {
        Promotor.findOne({username:username,password:password}, (err,user) =>{
            if (err) {
                done(err,null);
            }
            if (!user){
                done(null,false,{message:'Invalid Credentials!'})
            } else {
                done(null,user)
            }
        });
    }
));

// Passport serializing
passport.serializeUser((user,done) => {
    done(null,user._id);
});

passport.deserializeUser((id,done) => {
    Promotor.findById(id,function(err,user){
        if(err){
            done(err,false);
        } else {
            done(null,user);
        }
    })
})

受保护的GET函数

(isAuthenticated()在使用SPA中的axios时返回false)

exports.getNameById = (req,res) => {
    console.log(req.session)
    console.log(req._passport)
    if(!req.isAuthenticated()){ //RETURNS FALSE IN REACT & TRUE IN POSTMAN
        return res.status(401).send();
    }

    return controller.getDocumentById(Promotor,'firstname lastname',req,res);
}

客户端(React SPA)

Axios请求登录

(在Postman和应用程序中均可工作,并正确创建会话)

handleSubmit(e){
  console.log("Trying To log in");
  axios
    .post(`${api_url}/promotor/login`,{username: this.state.username, password:this.state.password})
    .then( (res) => {
      if (res.status === 200) {
        console.log(res);
        this.setState(() => ({toClientHome: true, id:res.data.id}));
      }
    });
  e.preventDefault();
}

Axios请求访问受保护的GET请求

(GET当设置会话cookie时,request在postman中工作,但在axios中不工作)

getFullName(id) {
  axios
    .get(`${api_url}/promotor/name/${id}`,{
      withCredentials: true
    })
    .then((res) => {
      //... rest of the code
    });
}
uplii1fm

uplii1fm1#

你能不能把你的cors中间件代码放在你的文件的顶部(在所有导入之后)!!

api.use(function(req,res,next){
    res.header("Access-Control-Allow-Origin", "http://localhost:3000");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Credentials", "true")
    next();
})

那就再试一次。

sr4lhrrt

sr4lhrrt2#

api.use(function(req,res,next){
    res.header("Access-Control-Allow-Origin", "http://localhost:3000");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Credentials", "true")
   
})

相关问题