我在一些安全博客中读到,将令牌存储在本地存储中是不安全的,所以我想做的是将令牌存储在vuex存储中,所有的API调用都将在所有后续请求中包含该令牌。
但是在成功登录期间,我无法首先访问令牌,我想做的是第一次将令牌存储在vuex存储中,我想到将令牌发送到响应的主体,但这将是一个易受攻击的方法,所以我在头[“authorization”]中发送它。
下面是我的user.js和login.vue文件。
router.post('/login', function (req, res, next) {
const {
UserName,
Password
} = req.body;
if (UserName.length == 0 || Password.length == 0) {
res.status(400).json({
message: 'Email or Password is empty',
});
} else {
login_pool.query(
'SELECT * FROM authentication WHERE user_name = ($1) and password = crypt(($2), password)',
[UserName, Password],
(err, results) => {
if (err) {
throw err;
} else if (results.rows.length == 1) {
// On Successful Login
const token = jwt.sign(
{
user_name: results.rows[0].user_name,
full_name: results.rows[0].full_name,
phone_number: results.rows[0].phone_number,
},
btoa(process.env.TOKEN_SECRET), // converting token_secret to base 64
{ expiresIn: '1800s' },
{ algorithm: 'HS256' },
(err) => {
if (err) {
res.status(400).json({
message: 'Not able to create a token',
});
console.log(err);
}
}
);
res.header('Authorization', `Bearer ${token}`);
res.status(201).json({
message: results.rows[0].full_name + 'logged in.',
});
console.log(results.rows[0].full_name + 'Just Logged In. ');
} else {
login_pool.query(
'SELECT * FROM authentication WHERE user_name = ($1)',
[UserName],
(errUser, resultUser) => {
if (resultUser.rows.length != 1) {
res.status(400).json({
message: 'User with this email does not exist',
});
} else {
res.status(400).json({
message: 'Password is not correct',
});
}
}
);
}
}
);
}
});
LoginSubmit() {
this.axios
.post(
"http://127.0.0.1:3000/users/login",
{
UserName: this.UserName,
Password: this.Password,
},
{
headers: {
"Content-Type": "application/json;charset=UTF-8",
"Access-Control-Allow-Origin": "*",
Accept: "application/vnd.api+json",
},
}
)
.then(
(res) => {
// successful login
console.log(res.headers); // authentication header not present here
this.Error = "";
console.log(this.axios.defaults.headers.common); // authentication header not present here
},
(err) => {
console.log(err.response.data.message);
this.Error = err.response.data.message.replace(/"/g, "");
}
);
},
2条答案
按热度按时间1yjd4xko1#
我从没见过这样的。JWT可以作为响应主体的一部分发送到某个
POST /auth
端点。然后使用某种存储方式保存该令牌。这是localStorage还是cookie是有争议的;我个人只是使用localStorage,以便API可以尽可能无状态。
但是,如果您使用
httpOnly
设置,则使用cookie会更安全,从而使JavaScript无法访问cookie。然后,cookie会立即从您的登录路由返回(因此,由于header由浏览器自动管理)
Vuex store本质上是一个全局状态对象,一旦刷新浏览器窗口,它就会丢失所有内容。除非你将它与某种加载/保存到Vuex存储的localStorage/sessionStorage耦合。
因此,我建议您删除
Access-Control-Expose-Headers: Authorization
头文件,并将JWT令牌作为httpOnly
cookie发送,如果这与您的身份验证流程兼容的话(因此没有Authorization: Bearer ...
头文件,只有浏览器自动发送的Cookie: ...
头文件)。很明显,你总是想使用https
,因为所有不是https
的东西都可以很容易地被(wifi-)网络的恶意所有者以纯文本方式读取。jdzmm42g2#
使用Access-Control-Expose-Headers解决了我的问题,现在我可以通过使用
res.headers["authorization"]
在前端访问授权头