Question

所以我有实现了jwt的node / express应用，它是一个宁静的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';
            }
        })
    })
});

Answer 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

存取受EJS JWT保护的路由

1 个答案: