如何使用带有passport集成的PrivateRoutes -router-dom设置路由器
我目前正在尝试设置一个私有路由自定义组件，如果用户通过身份验证或被重定向到登录页面，它将返回一个正常的路由()。
下面是我的PrivateRoute组件：
PrivateRoute.js
<imports>
...
</imports>
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
sessionStorage.getItem('auth') ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/signin',
state: { from: props.location }
}}/>
)
)}/>
)
export default PrivateRoute;上面的代码可以工作，但我的sessionStorage遇到了问题。在我的sessionStorage中，我存储了一个布尔值，每次用户登录和注销时，该值基本上都会更新。布尔值是使用下面的axios promise函数从服务器获取的：
authenticationCtrl.js
<imports>
...
</imports>
const authenticate = async () => {
let response = await axios.get('/test/login').then(res => sessionStorage.setItem('auth', res.data.isAuthenticated))
.catch(err => console.log(err));
//sets the boolean that gets updated by server when user signs - in(up)/out).
return response;
}我在我的登录和注册组件中调用了上面的方法。我目前遇到的问题是，每当我登录或注册时，即使sessionStorage.getItem('auth')已经更新，我仍然会被重定向到登录页面。我必须转到我的根页面，然后通过那里访问我的私有路由，或者将路由url写入我的浏览器才能获得访问权限。
Signin.js
<imports>
...
</imports>
export default (props) => {
const [detail, setDetail] = useState({
username: "",
pass: "",
err: ""
});
function handleChange(event) {
const { name, value } = event.target;
setDetail(prevValue => {
return { ...prevValue, [name]: value, err: ''};
});
}
function onSubmit(event){
event.preventDefault();
const {history} = props;
login({
username: detail.username,
password: detail.pass
}, (data) => {
console.log(data);
if(data.message){ //if authenticated
history.push('/user/home');
}else {
setDetail(prevValue => {
return {...prevValue, err: 'Failed to login'}
})
}
});
authenticate(); //method from authenticationCtrl.js
}我需要帮助来解决这个问题吗？我希望能够登录或注册，而不是被重定向回这些页面，而是直接访问我的PrivateRoutes。
在后端，我使用passport和express-sessions来保证安全性。我已经将它们添加为中间件，并在请求中使用req.isAuthenticated变量来检查用户是否已通过身份验证，并更新客户端sessiosStorage.getItem('auth')，以访问PrivateRoutes。
Routes.js
<imports>
...
</imports>
router.route('/login')
.get((req,res) => {
res.json({isAuthenticated: req.isAuthenticated()});
})
.post(user.login); //from routeController.js renamed as user on import.routeController.js
exports.login = (req,res) => {
const user = new User({
username: req.body.username,
password: req.body.password
});
req.login(user, (err) => {
if(err){
console.log(err);
res.json({message: false});
}else{
passport.authenticate('local', {failureRedirect: '/test/login'})(req,res, () => {
res.json({message: true});
});
}
})
}预先感谢:>
回答 1
Stack Overflow用户
发布于 2020-08-17 18:29:55
这是一个导入错误。我不小心在我的react应用程序中导入了一个express模块。我必须使用相同的名称导入，所以自动导入会认为它是与express关联的导入。感谢所有尝试:>的人
https://stackoverflow.com/questions/63244129
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号