如何将用户重定向到需要访问令牌的页面,而不在URL查询中公开令牌

时间:2017-11-11 22:36:44

标签: javascript node.js express frontend access-token

我正在尝试实现一种只允许授权管理员在我的Web App / API中访问包含敏感信息的页面的方法。我目前正在使用带有Express的Node.JS来处理路由。使用Jade / Pug View Engine生成视图。使用github上的请求框架处理CORS请求。 (https://github.com/request/request

目前,客户端存储在MongoDB集合中。当他们输入登录信息时,他们的密码将与存储在数据库中的哈希进行比较。如果所有内容都检出,则会为用户生成JWT并保存在客户端数据库中,并在localStorage.token中存储在浏览器中。

然后将用户重定向到具有身份验证功能作为中间件的启动页面。身份验证功能以三种形式接受令牌:

var token = req.body.token || req.query.token || req.headers['x-access-token'];

我觉得重定向的处理方式有点笨拙。我正在使用window.location = route?token = [token]

令牌被移交给req.query.token中的身份验证功能,但这是在URL中公开的。这是我的登录功能:

function submitLogIn() {
    var credentials = {
        email: logInForm.userEmail.value,
        password: logInForm.pwField.value
    }

    fetch('/login', {
        headers:{
            'Content-Type': 'application/json'
        },
        method: 'POST',
        body: JSON.stringify(credentials)
    }).then(function(res){
        if(!res.ok) alert("Error!")
        else return res.json().then(function(result){

            localStorage.token = result.token;

 //This is how I'm doing redirecting:

            window.location = '/selection?token=' + result.token;


        }).catch(function(err){
            console.log(err);
            throw err;
        });
    });

仅供参考,这是它在端口3001上的前端路由,它作为反向代理请求将其转换为3000:

router.post('/login', function(req, res, next) {
    request.post({
        url: 'http://localhost:3000/authorize',
        form: req.body 
    }).pipe(res)
});

我的主要问题是:如何在fetch调用中处理前端的重定向?

我的启动画面基本上是一个按钮菜单,可以将用户带到不同的页面。这些页面将包含只有管理员才能看到的信息。我们想说我想点击这个导航按钮。它转到/ GET路由,需要将令牌发送到OK状态。如果没有令牌,则返回403.

router.get('/main', authorize.adminRequired, function(req, res, next) {
    request.get({
        url: 'http://localhost:3000/menus'
        }, function(response, sensitiveItems) {
        return res.render('index', {menu: JSON.parse(sensitiveItems)});
    });
 });

authorize.adminRequired函数需要查询,x-access-token或req.body形式的令牌。无法在GET请求中发送正文。不想在URL中公开,所以:

这是我尝试过的。我有这个重定向提取调用作为onclick函数。

function redirectToSensitivePage() {
    fetch('/main', {
        headers: {
            'x-access-token': localStorage.token
        },
        method: 'GET'
    });
};

这给了我一个200,好的。但是我没有加载页面。路线中的res.render(索引)不会触发。响应确实包含所有数据,但我没有重定向到可视化表示。

我可以使用window.location = / main?token = [token]执行相同的hacky重定向,但我不想公开URL令牌。我可以在登录时加载我需要的所有内容而不是单独的页面,将这些div隐藏在视线之外,直到按下按钮使div成为主要的可见div,但我宁愿弄清楚如何通过重定向来实现。

我仍然在使用Node,但如果我做了任何愚蠢的明显疏忽,请告诉我。

编辑:我应该试试吗

var token = localStorage.token || req.body.token || req.query.token || req.headers['x-access-token'];

从每个请求中自动从localStorage中抓取是否有任何不利之处?

0 个答案:

没有答案
相关问题