在Vue.js中把token存储在哪里?

j2datikz  于 2023-05-29  发布在  Vue.js
关注(0)|答案(2)|浏览(153)

我在一些安全博客中读到,将令牌存储在本地存储中是不安全的,所以我想做的是将令牌存储在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, "");
            }
        );
},
1yjd4xko

1yjd4xko1#

我从没见过这样的。JWT可以作为响应主体的一部分发送到某个POST /auth端点。然后使用某种存储方式保存该令牌。
这是localStorage还是cookie是有争议的;我个人只是使用localStorage,以便API可以尽可能无状态。

但是,如果您使用httpOnly设置,则使用cookie会更安全,从而使JavaScript无法访问cookie。然后,cookie会立即从您的登录路由返回(因此,由于

Set-Cookie: my_session=abcd1234; httponly; ...

header由浏览器自动管理)
Vuex store本质上是一个全局状态对象,一旦刷新浏览器窗口,它就会丢失所有内容。除非你将它与某种加载/保存到Vuex存储的localStorage/sessionStorage耦合。
因此,我建议您删除Access-Control-Expose-Headers: Authorization头文件,并将JWT令牌作为httpOnly cookie发送,如果这与您的身份验证流程兼容的话(因此没有Authorization: Bearer ...头文件,只有浏览器自动发送的Cookie: ...头文件)。很明显,你总是想使用https,因为所有不是https的东西都可以很容易地被(wifi-)网络的恶意所有者以纯文本方式读取。

jdzmm42g

jdzmm42g2#

res.header({
   Authorization: "Bearer" + token,
   "Access-Control-Expose-Headers": "Authorization",
});

使用Access-Control-Expose-Headers解决了我的问题,现在我可以通过使用res.headers["authorization"]在前端访问授权头

相关问题