配置ajax标头和重定向



我有一个简单的节点身份验证应用程序。 我想做的是在标头中发送令牌并重定向到 url。 例如,用户单击个人资料,它会使用令牌重定向他,以便他可以访问该页面。

我正在尝试我发现的东西,但它使一些我无法理解的东西变得奇怪。 点击网址后,它会发出 2 个请求。只有第一个带有 jwt 持有者令牌标头。第二个重定向是没有的。我添加了图像以更好地理解。 这是图片

这是我的布局代码.车把

<!DOCTYPE html>
<html>
<head>
<title>LoginApp</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
// HERE I CLICK ON PROFILE
<li role="presentation"><a onclick="submitForm()">Profil</a></li>
<li role="presentation"><a href="/users/register">Register</a></li>
</ul>
</nav>
<h3 class="text-muted">LoginApp</h3>
</div>
</div>
<footer class="footer">
<p>&copy; 2015 LoginApp, Inc.</p>
</footer>
</div> <!-- /container -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
function submitForm() {
var data = {};//Your JSON Data
console.log("ok");
var headers = {
"Contect-Type": "application/json",
"Authorization": "Bearer " + token
};
$.ajax({
url: 'http://localhost:3000/users/profile',
type: 'GET',//'GET','PUT','DELETE'
headers: headers,
data: data,
success: function (result) {
alert("success");
},
error: function (error) {
alert('error ', error);
}
});
window.location = "http://localhost:3000/users/profile";
}
</script>
</body>
</html>

还有我路线的一部分.js

// Login view
router.get("/login", function (req, res) {
res.render("login");
});
// Login
router.post("/login", (req, res, next) => {
const username = req.body.username;
const password = req.body.password;
User.getUserByUsername(username, (err, user) => {
if (err) throw err;
if (!user) {
return res.json({
success: false,
msg: "User not found"
});
}
User.comparePassword(password, user.password, (err, isMatch) => {
if (err) throw err;
if (isMatch) {
const token = jwt.sign({
data: user
},
config.secret, {
expiresIn: 604800 // 1 week
}
);
res.render("index", {
token: token
});
} else {
return res.json({
success: false,
msg: "Wrong password"
});
}
});
});
});
// Profile
router.get(
"/profile",
passport.authenticate("jwt", {
session: false
}),
(req, res, next) => {
res.json({
user: req.user
});
}
);
module.exports = router;

不能使用自定义标头进行重定向。尝试使用本地存储、Cookie、GET 或 POST 变量,具体取决于您的后端实现。下面是在本地存储中存储令牌的示例:

// Container for the frontend functions
app = {};
app.config = {
'sessionToken': false
};
// Set the session token in the app.config object as well as localstorage
app.setSessionToken = function(token) {
app.config.sessionToken = token;
var tokenString = JSON.stringify(token);
localStorage.setItem('token', tokenString);
};
// Get the session token from localstorage and set it in the app.config object
app.getSessionToken = function() {
var tokenString = localStorage.getItem('token');
if(typeof(tokenString) == 'string') {
try {
var token = JSON.parse(tokenString);
app.config.sessionToken = token;
} catch(e) {
app.config.sessionToken = false;
}
}
};
// Get the token from the local after the window loads
window.onload = function() {
app.getSessionToken();
};

更多信息: https://auth0.com/docs/security/store-tokens

最新更新