访问受 EJS 保护的 JWT 路由

Posted 2023-03-08

【中文标题】访问受 EJS 保护的 JWT 路由

【英文标题】：Accesing routes that are JWT protected with EJS

【发布时间】：2019-01-25 08:52:52

【问题描述】：

所以我已经实现了 jwt 的 node/express 应用程序，它是 restful API。所以直到现在，我只是和jsons交流。

现在我想实现一些功能，比如管理面板，它应该位于我的应用程序中。

所以这里是 admin.js ：

const express = require('express');
const router = express.Router();
const createError = require('http-errors');
const  admin  = require('../config');
const  aW, isAdmin  = require('../helpers');
const jsonwebtoken = require('jsonwebtoken');

// preappended route: /admin

router.get('/', aW(async (req, res) => 
    res.render('adminLogin');
))

router.post('/login', aW(async (req, res) => 
    const  username, password  = req.body;
    if (!(username == admin.username && password == admin.password)) throw createError(401, 'Unauthorized');

    const token = jsonwebtoken.sign( type: 'admin' , admin.jwt,  expiresIn: '2h' );
    res.json( token: 'JWT ' + token );
))

router.use(isAdmin); // middleware to check if user is admin

router.get('/dashboard', aW(async (req, res) => 
    res.render('index',  title: 'admin' )
)) 

所以点击 /admin 可以正常工作并呈现表单。此外，通过该表单和 ajax 调用，我传递参数并从路由 /admin/login 获取 JWT 令牌。调用成功后，我得到了令牌。

现在，我的问题是，如何更改页面的 href 以转到 /admin/dashboard 并在标题中传递该 JWT 令牌，所以我得到了呈现索引页。目前，我只收到“未经授权”的消息（因为我没有通过 JWT）。

我目前的登录逻辑是：

$(document).ready(function () 

    var JWT = null;

    $('#adminLogin').on('submit', function(e) 
        e.preventDefault();
        $.ajax(
            url: '/admin/login',
            type: 'POST',
            dataType: 'json',
            data: username: $('#adminLoginUsername').val(), password: $('#adminLoginPassword').val(),
            success: function(data) 
                JWT = data.token;
                window.location.href = '/admin/dashboard';
            
        )
    )
);

【参考方案1】：

现在您已经从登录屏幕获得了 JWT。您应该在调用受保护的 API 时提供 Authorization 标头。要设置授权标头，您可以这样做：

$.ajax(
    url: url,
    method: "POST",
    dataType: "json",
    data: JSON.stringify(data),
    beforeSend: function (xhr) 
        /* Set the Authorization header here*/
        xhr.setRequestHeader("Authorization", "Bearer " + JWTToken;
    ,
    success: function (data) 

    ,
    error: function (jqXHR, status, error) 

    
);

这是 JWT 身份验证的精彩文章： https://fullstackmark.com/post/13/jwt-authentication-with-aspnet-core-2-web-api-angular-5-net-core-identity-and-facebook-login

【讨论】：

那个 ajax 可以工作，我从中获得了 JWT（没有标头身份验证），但现在我需要访问 /admin/dashboard，我如何在其中传递标头路线和更改href？此外，这条路线的方法是“GET”（就像我在节点代码中写的那样）

Href 只是指向该路由的链接，没有像您希望如何通过访问这样的逻辑。但是从那个页面，如果它试图访问 API，他们都需要像上面一样传递授权标头。

你真的读过那篇文章吗？您需要实现将处理您的 JWT 的身份验证服务。您将维护来自单个服务的所有请求（获取/发布/放置/删除），该服务将访问身份验证服务并查看它是否具有 JWT 令牌；如果有，那么将设​​置 Authorization 标头。就是这样...所有其他页面只是将使用服务的页面。您将维护页面之间的路线，用户将在应用程序中导航。