如何从View(ejs)发送标头中的令牌

时间:2019-09-12 09:39:20

标签: node.js express

我想在标头中发送json网络令牌以进行进一步的身份验证。

控制器功能:

module.exports.checkUser = (request, response) => {
    crudModel.verifyUser( (result) => {
        if (Array.isArray(result) && result.length > 0) {
            if(result[0].email == request.body.email && result[0].password == request.body.password){

                let jwtToken = jwt.sign({
                    email: result[0].email,
                    user_id: result[0].uid
                }, "mohit_pandey_1996", {
                    expiresIn: 300000
                });
                response.render('dashboardView', {data: jwtToken});
            }
        }else{
            console.log('Invalid Username or Password');
            response.render('errorView');
        }
    }, request.body);
}

View(ejs):

<li class="nav-item active">
    <a href="/user/home?authorization=Bearer "+data>Home 
         <span class="sr-only">(current)</span>
    </a>
</li>

1 个答案:

答案 0 :(得分:0)

我建议使用两种常用方法之一。我描述了如何通过客户端上的获取对象以及服务器上的表达框架来实现它。

1。在HttpOnly Cookie中设置令牌

在服务器控制器中


module.exports.checkUser = (request, response) => {

    const { token = null } = (/token=(?<token>[^;]*)/.exec(request.headers.cookie) || {}).groups || {} // Or  better use  cookie-parser

    crudModel.verifyUser((result) => {
        if (Array.isArray(result) && result.length > 0) {
            if(result[0].email == request.body.email && result[0].password == request.body.password){
                let jwtToken = jwt.sign({
                    email: result[0].email,
                    user_id: result[0].uid
                }, "mohit_pandey_1996", {
                    expiresIn: 300000
                });


                response.cookie('token', jwtToken, { 
                    httpOnly: true,
                    // secure: true // - for secure, https only cookie
                });


                response.render('dashboardView'); // - now we don't need to appear token to the view, because it automatically appears in cookies in each request


            }

        } else {
            console.log('Invalid Username or Password');
            response.render('errorView');
        }

    }, token); // <- pass token


}

在客户端(页面上),如果您对请求使用访存,则需要添加凭据参数


function makeRequest(url) {
    return fetch(url, {
      credentials: 'include'  
    })
}


有关此方法的优缺点的更多信息,请阅读 https://stackoverflow.com/a/39833955/9051045

2。在请求标头中使用令牌并将其保存到localStorage

示例(客户端脚本),位于html>头


function makeRequest(url, method) {
    var jwtToken = localStorage.getItem('token')
    var headers = {}

    if(jwtToken) {
        headers['Authorization'] = 'Bearer ' + jwtToken
    }

    return fetch(url, {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors',
        headers: headers
    })
}

此函数在localStorage中设置时通过令牌发出请求

您的控制器功能:(服务器)


module.exports.checkUser = (request, response) => {
    var {token = ''} = (/Bearer\s+(?<token>.*)/.exec(request.get('Authorization') || '') || {}).groups || {}

    crudModel.verifyUser( (result) => {
        if (Array.isArray(result) && result.length > 0) {
            if(result[0].email == request.body.email && result[0].password == request.body.password){

                let jwtToken = jwt.sign({
                    email: result[0].email,
                    user_id: result[0].uid
                }, "mohit_pandey_1996", {
                    expiresIn: 300000
                });
                response.render('dashboardView', { token : jwtToken});
            }
        }else{
            console.log('Invalid Username or Password');
            response.render('errorView');
        }
    }, token); // <-pass token
}

View(ejs):


<script>
    localStorage.setItem('token', "<%= JSON.stringify(token) %>"); // <- setup token into localStorage, (but i think it's not good place for that, and would be better get token with another authorization request)
</script>

<!-- Your code below -->
<li class="nav-item active">
    <a href="/user/home?authorization=Bearer "+data>Home 
         <span class="sr-only">(current)</span>
    </a>
</li>