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

Question

I have a back-end in Node.js, front-end in Vue.js and a scenario like this:

API-1: Retrieves a user token and redirects to API-2. The token should be sent along API-2

API-2: Displays a web page, populated with data that depend from the token generated in API-1. The token itself should be accessed and if possibly stored in the client's (browser's) local storage.

So during the redirect I need to pass the token from the back-end to the client side. I would rather not send it as a query param because that would mean that anyone can see it.

API-1 content:

....
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 (the redirected page) content:

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

Vue.js code (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;
            })
    }
})

I have searched around and for the client side the idea of keeping the token in the local storage seems like the best. However:

1. I don't know how to pass it the token from the API to the view, other than pass the token along as part of the url (which I don't like)
2. What would be the best way to keep the token in the server side for re-use during navigation from page to page?

I would prefer simplistic solutions, since for the scope of this code using multitudes of libraries/modules would be an overkill.

Answer 1

To store data temporarily in the browser you can use local storage or session storage , in that case you can use a local-storage or sessionstorage npm

for example, to set a token in local storage :

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) */

You can alos do it with AJAX request from jQuery