在重定向期间将令牌从 API 传递到前端

Posted 2023-03-08

【中文标题】在重定向期间将令牌从 API 传递到前端

【英文标题】：Pass token from API to front-end during redirect

【发布时间】：2019-10-12 01:03:35

【问题描述】：

我在 Node.js 中有一个后端，在 Vue.js 中有一个前端以及这样的场景：

API-1：检索用户令牌并重定向到 API-2。 令牌应通过 API-2 发送

API-2：显示一个网页，其中填充了依赖于 API-1 中生成的令牌的数据。 应该访问令牌本身，如果可能的话，应该将其存储在客户端（浏览器）的本地存储中。

所以在重定向期间，我需要将令牌从后端传递到客户端。我宁愿不将它作为查询参数发送，因为这意味着任何人都可以看到它。

API-1 内容：

....
var api_2_uri = "/";
var user_token = get_token_function(); //user token was retrieved
res.redirect(api_2_uri); //todo: send user_token along the request for redirect

API-2（重定向页面）内容：

....
<p>username</p>
<p>email</p>
<p>telephone</p>
<script src="./vue_code.js"></script>
....

Vue.js 代码（vue_code.js）：

var login_form = new Vue(
    el: '#login_form',
    data: 
        username: "",
        email: "",
        telephone: ""
    ,
    created()
        var user_token_value = ""; //todo: here we must access the user token that was passed to the front-end app. if possible, store it in the app's local storage
        fetch('https://third_party_url?user_token='+user_token_value)
            .then(response => response.json())
            .then(json => 
                this.username = json.username;
                this.email = json.email;
                this.telephone = json.telephone;
            )
    
)

我已经四处搜索，对于客户端来说，将令牌保存在本地存储中的想法似乎是最好的。然而：

我不知道如何将令牌从 API 传递到视图，除了将令牌作为 url 的一部分传递（我不喜欢） 将令牌保留在服务器端以便在页面之间导航期间重复使用的最佳方法是什么？

我更喜欢简单的解决方案，因为在这段代码的范围内，使用大量库/模块会有点过头了。

【问题讨论】：

我会说会话变量就是这样，但我不确定如何使用节点来做到这一点。

您可以将令牌存储在本地存储或 cookie 中。你可能想要一个插件来做到这一点。然后你可以在请求头中传递它。

【参考方案1】：

要在浏览器中临时存储数据，您可以使用local storage 或session storage，在这种情况下您可以使用local-storage 或sessionstorage npm

例如，在本地存储中设置令牌：

var ls = require('local-storage');

// when user signed in you give them a token 

var user_token = generate_token-function();

ls.set('foo', user_token);  

// then to verify the token, you can use a get method

var getUserToken =  ls.get('foo')

// then you can verify it : 

verifyToken_function(getUserToken) /* if (err) redirect the user to your login page res.redirect('/login') else everything is good res.redirect('/profile) */

您也可以使用AJAX request from jQuery 进行操作