结合基于NodeJS的护照auth和ReactJS前端
我用带护照的回收站做了一个后端。它要求我第一次访问http://localhost:3001/auth/github，它重定向到GitHub，后者显示一个登录页面，或者重定向到3001端口上的应用程序。
现在，我正在构建一个ReactJS前端:3000。它应该将AJAX调用发送到后端，并将auth令牌作为查询字符串参数附加。我已经将端口转发添加到客户端的package.json，因此所有AJAX调用都得到了正确的处理。
我无法理解的是如何将auth令牌(从http://localhost:3001/auth/github/callback作为cookie接收)发送到客户端。虽然我的AJAX调用是正确的代理，但当我导航到/auth/github时，我仍然在React生成的页面上，而我的:3001端点没有命中。如果我转到:3001/auth/github，我就不会通过我的前端代码获得我的auth_token cookie。
换句话说，我有两个问题: 1.如何从前端导航到后端的auth页(http://localhost:3001/auth/github)？2.如何将#1中的cookie获取到我的前端，以便在后续的查询中使用？
当我构建一个演示时，我只需要一个快速而肮脏的解决方案就可以了，但是我愿意考虑其他的想法，比如打开一个弹出窗口和/或一个IFrame。
回答 2
Stack Overflow用户
发布于 2018-05-28 14:54:04
关于开展这项工作的一些建议：
- 如何从前端导航到后端的auth页(http://localhost:3001/auth/github)？
在您的React (在package.json中)示例中使用代理：
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": {
"/auth/github": {
"target": "http://localhost:3001"
},
"/api/*": {
"target": "http://localhost:3001"
}
},
"dependencies": {
"axios": "^0.16.2",
"materialize-css": "^0.99.0",
"react": "^16.0.0-alpha.13",
"react-dom": "^16.0.0-alpha.13",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.1",
"react-scripts": "1.0.10",
"react-stripe-checkout": "^2.4.0",
"redux": "^3.7.1",
"redux-form": "^7.0.1",
"redux-thunk": "^2.2.0"
},
}这样，当您从前面访问api时，可以使用'/auth/github‘直接引用它。
- 如何将#1中获得的cookie带到我的前端，以便在后续查询中使用它？
我不确定回收站后端，但当我使用Express时，您可以使用passport.session()从护照获得会话cookie
希望这能有所帮助。
Stack Overflow用户
发布于 2018-05-28 14:43:56
如果您正在使用Passport，则只需阅读策略文档即可。我假设认证是通过Oauth完成的。
特快示例
Routes.js
api.route('/auth/github')
.get(PassportCtrl.auth);
api.route('/auth/github/callback')
.get(PassportCtrl.authCallback, PassportCtrl.redirect);PassportCtrl.js
import passport from 'passport';
const auth = passport.authenticate('github', {
scope : ['profile', 'email']
});
const authCallback = passport.authenticate('github');
const redirect = (req, res) => {
res.redirect('/whereveryouwant');
}
const getAuthUser = (req, res) => {
res.json({
user : req.user
})
}
const logOut = (req, res) => {
req.logOut();
res.redirect('/');
}
export default {
auth,
authCallback,
redirect,
getAuthUser,
logOut
}护照底座
// adding cookie feature
app.use(cookieSession({
maxAge : 30 * 24 * 60 * 60 * 100,
keys : [process.env.COOKIE_SECRET]
}));
// initializing passport
app.use(passport.initialize());
app.use(passport.session());我忘了，你得代理
webpack.config.js
devServer: {
proxy: { // proxy URLs to backend development server
'/auth/github': 'http://localhost:3001',
'/api/**' : {
'target' : 'http://localhost:3001'
}
},
hot : true,
contentBase: path.join(__dirname, "dist"),
historyApiFallback : true,
compress: true,
port: 8080
}反应
import React from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
class Header extends React.Component {
renderContent () {
const {auth} = this.props;
switch (auth) {
case null : return;
case false : return (
<li><a href='/auth/google'>Login with google</a></li>
)
default: return ([
<li key={'logout'}><a href='/api/logout'>Log out</a></li>
])
}
}
render () {
const {auth} = this.props;
return (
<nav>
<div className='nav-wrapper'>
<Link className="left brand-logo" to={auth ? '/whereveryouwant' : '/'}>
Your page Name
</Link>
<ul className='right'>
{this.renderContent()}
</ul>
</div>
</nav>
);
}
}
const mapStateToProps = (state) => {
return {
auth : state.auth
}
}
export default connect(mapStateToProps)(Header);https://stackoverflow.com/questions/50568645
复制相似问题
腾讯云开发者
