问题描述
我正在努力使用户授权工作很长时间。我当前遇到的问题是，该用户可以成功登录并获得授权，但是一旦单击另一个页面，他们将变为未经授权。我回到登录页面，调试器显示401授权的错误。我看过多个似乎有类似问题的帖子，但是我没有看到他们使用cookie的任何帖子。我对下一步的工作很迷茫。 对于下一步的工作有任何帮助或指导，我将不胜感激。
passport.js
const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const JwtStrategy = require('passport-jwt').Strategy;
const ExtractJwt = require('passport-jwt').ExtractJwt;
const User = require('./database/models/User');
const cookieExtractor = req =>{
let token = null;
if(req && req.cookies){
token = req.cookies["access_token"];
}
return token;
}
// authorization
passport.use(new JwtStrategy({
jwtFromrequest : cookieExtractor,secretorKey : "Secret"
},(payload,done)=>{
User.findById({_id : payload.sub},(err,user)=>{
if(err)
return done(err,false);
if(user)
return done(null,user);
else
return done(null,false);
});
}));
// authenticated local strategy using username and password
passport.use(new LocalStrategy((username,password,done)=>{
User.findOne({username},user)=>{
// something went wrong with database
if(err)
return done(err);
// if no user exist
if(!user)
return done(null,false);
// check if password is correct
user.comparePassword(password,done);
});
}));
UserRoute.js
const express = require('express')
const userRouter = express.Router()
const passport = require('passport');
const JWT = require("jsonwebtoken");
const passportConfig = require("../..//passport")
const User = require("..//../database/models/User")
const signToken = userID =>{
return JWT.sign({
iss : "NoobCoder",sub : userID
},"Secret",{expiresIn : "1h"});
}
module.exports = app => {
app.post('/api/register2', (req, res) => {
const { username, password, role } = req.body
// ADD VALIDATION
User.findOne({ username: username }, (err, user) => {
if (err) {
console.log('User.js post error: ', err)
} else if (user) {
res.json({
error: `Sorry, already a user with the username: ${username}`
})
}
else {
const newUser = new User({
username: username, password: password, role: role
})
newUser.save((err, savedUser) => {
if (err) return res.json(err)
res.json(savedUser)
})
}
})
})
app.post('/api/login',passport.authenticate('local',{session : false}),(req,res)=>{
if(req.isAuthenticated()){
const {_id,username,role} = req.user;
const token = signToken(_id);
res.cookie('access_token',token,{httpOnly: true,sameSite:true});
res.status(200).json({isAuthenticated : true,user : {username,role}});
}
});
app.get('/api/logout',passport.authenticate('jwt',res)=>{
res.clearCookie('access_token');
res.json({user:{username : "",role : ""},success : true});
});
app.get('/api/authenticated',res)=>{
const {username,role} = req.user;
console.log(req.user);
res.status(200).json({isAuthenticated : true,role}});
});
};
AuthServices.js
export default {
login: user => {
return fetch("/api/login",{
method: "post",body: JSON.stringify(user),headers: {
"Content-Type": "application/json"
}
})
.then(res => res.json())
.then(data => data);
},register: user => {
return fetch("/api/register2",logout: () => {
return fetch("/api/logout")
.then(res => res.json())
.then(data => data);
},isAuthenticated: () => {
return fetch("api/authenticated",{
headers : {
'Content-Type': 'application/json','Accept': 'application/json'
}
}).then(res => {
if (res.status != 401) return res.json().then(data => data);
else return { isAuthenticated: false,user: { username: "",role: "" } };
});
}
};
login.js
import React,{ useState,useRef,useEffect,useContext } from "react";
import AuthService from "../Services/AuthService";
import Message from "../components/Message";
import { AuthContext } from "../Context/AuthContext";
import styled from "styled-components";
const Login = props => {
const [user,setUser] = useState({ username: "",password: "" });
const [message,setMessage] = useState(null);
const authContext = useContext(AuthContext);
let timerID = useRef(null);
const onChange = e => {
setUser({ ...user,[e.target.name]: e.target.value });
};
const onSubmit = e => {
e.preventDefault();
AuthService.login(user).then(data => {
console.log(data);
const { isAuthenticated,user,message } = data;
if (isAuthenticated) {
authContext.setUser(user);
authContext.setIsAuthenticated(isAuthenticated);
props.history.push("/step1");
} else setMessage(message);
});
};
const GridWrapper =
{
marginTop: '4em',marginLeft: '28em',marginRight: '1em'
}
const LoginForm =
(
<div>
<form onSubmit={onSubmit}>
<h3>Please sign in</h3>
<label htmlFor="username" className="sr-only">
Username:{" "}
</label>
<input
type="text"
name="username"
value={user.username}
onChange={onChange}
className="form-control"
placeholder="Enter Username"
/>
<label htmlFor="password" className="sr-only">
Password:{" "}
</label>
<input
type="password"
value={user.password}
name="password"
autoComplete="on"
onChange={onChange}
className="form-control"
placeholder="Enter Password"
/>
<button className="btn btn-lg btn-primary btn-block" type="submit">
Log in{" "}
</button>
</form>
</div>
)
return (
<div className = 'col-md-6' style = {GridWrapper}>
{LoginForm}
</div>
);
};
export default Login;
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）