时间戳

首页 > 解决方案 > 访问受保护的路由

jquery - 访问受保护的路由

问题描述

我刚开始使用JWT。我进行登录并将令牌作为JSON 响应发送给客户端。成功登录后，我将其存储到sessionStorage ，然后我使用该令牌通过另一个ajax 调用（GET）的标头访问受保护的路由，成功将重定向到该页面。

我也开始直接保护我正在重定向的路由，并且没有/verify-user路由，但是由于在重定向时没有发送标头，我发现此解决方案仅用于验证令牌。但是我不知道这是否是好方法。

你怎么看？

我在客户端登录：

   // Login POST 
    $('#frm-login').submit(function (e) {
        event.preventDefault()
        $('button').text('Please wait ...').prop('disabled')
        $.ajax({
            url: "/login-user",
            type: "POST",
            data: $('#frm-login').serialize(),
            dataType: "json"
        }).always(function (response) {
            $('button').text('Logging in').prop('disabled')
            console.log("Login", response)
            if (response.status == "error") {
                $('button').removeClass('lime').addClass('red').text('Log in failed. Try again.');
                return
            }
            localStorage.setItem('token', response.token);
            console.log(localStorage.token)
            $.ajax({
                type: "GET",
                url: "/verify-user",
                headers: {
                    'Authorization': 'Bearer ' + localStorage.token
                }
            }).always(function (response) {
                console.log("Access", response)
                if (response.status == "error") {
                    $('button').removeClass('lime').addClass('red').text('Log in failed. Try again.');
                    return
                }
                if (response.status == 301) {
                    $(location).attr('pathname', '/LIMELine/chatroom/');
                    //$('img#profile-img').attr('src', response.responseText.authData.user.avatar)
                    console.log(response)
                }
            });
        })
    })

我在服务器上的登录：

/********************* LOGIN *********************/

app.post('/login-user', (req, res) => {
    user.loginUser(req.body, (err, jResult) => {
        if (err) {
            return res.send(jResult)
        }
        let token = jwt.sign({
            user: jResult,
        }, "supersecret")
        console.log(token);
        return res.json({
            token: token
        })
        //add other headers here...
    })
})

/********************* VERIFY USER *********************/

app.get('/verify-user', verifyToken, (req, res) => {

    jwt.verify(req.token, "supersecret", (err, authData) => {
        if (err) {
            return res.status(403).json({
                message: "No token found"
            });
        }
        return res.status(301).json({
            authData
        });
    })
})

受保护的路由，用户在登录时应该看到

// *********************   MAIN PAGE *********************************************

app.get('/LimeLINE/chatroom' (req, res) => {
            try {
            // CODE FOR CONTENT OF THE PAGE
            return res.json({
                authData
            });
        }
    })
})

标签： jquerynode.jsajaxredirectjwt

解决方案

如果您要进行整页重定向（不是通过 ajax，而是通过浏览器自动进行，例如单击未调整的锚标记时），浏览器不会自动发送AuthorizationHTTP 标头。

您可以使用 cookie 开始发送 JWT 令牌（这不太标准，并将客户端与浏览器联系起来，但会在所有完整页面和 AJAX 调用上自动发生）或通过 ajax 调用自己处理重定向。另一个“混合”解决方案是启用Authorization标头和 cookie 作为有效的授权方法。

IMO 这一切都取决于您的服务器是否应该在当前或不久的将来接受非浏览器客户端。

推荐阅读