异步请求 load/render 个新页面

Question

我正在做一个项目，使用 firebase 身份验证登录，即 login with google；如果已登录，则重定向到 /app，其中存在 webapp 的实际功能。

登录页面js:


document.getElementById('login').addEventListener('click', e => {
    var provider = new firebase.auth.GoogleAuthProvider();

    firebase.auth()
        .signInWithPopup(provider)
        .then((result) => {
            firebase.auth().currentUser.getIdToken(true).then(function(token) {
                //  make request to backend to get /app page where main app exists
                axios.get('/app', {
                    headers: { 'Authorization': `Bearer ${token}` } 
                })
                .then(res => {
                    console.log(res.data);
                });
            });
        });

});

现在我的主要动机是，在 header.

中，如果没有 JWT 令牌，用户将无法访问 /（着陆页）以外的页面

所以这里当用户使用 login With google 登录时，它会在登录时提供令牌，然后它会使用令牌请求后端，后端将 return /app 页面 pre-rendered!

问题：使用此代码，当我请求后端时，它只是 return HTML `res.data` 中的代码，但我想要实际页面！！

Axios 可以很好地从我的后端获取数据 api 但我不知道如何附加 header 并发出请求，并获取页面而不是源代码作为响应；

同样的问题在应用程序中无处不在。我只是不希望用户在 header!

中访问没有 JWT 的登陆页面以外的页面

后端：nodeJs
firebase 身份验证
用于视图的 ejs 模板引擎

编辑：

returning 源代码的含义是：
img of console log

欢迎任何帮助、想法或方法

Answer 1

像以前一样登录
将令牌写入 cookie 而不是授权 header
将浏览器重定向到 /app
在后端读取 cookie 而不是授权 header

这样浏览器将通过呈现响应为您解决问题。使用 cookie 是在没有 AJAX.

的情况下实现登录的常用方法

无法进行重定向和设置授权 header。

异步请求 load/render 个新页面

async req to load/render new page

javascript

node.js

axios

request

rendering

问题：使用此代码，当我请求后端时，它只是 return HTML `res.data` 中的代码，但我想要实际页面！！

异步请求 load/render 个新页面

async req to load/render new page

javascript

node.js

axios

request

rendering

问题：使用此代码，当我请求后端时，它只是 return HTML res.data 中的代码，但我想要实际页面！！

问题：使用此代码，当我请求后端时，它只是 return HTML `res.data` 中的代码，但我想要实际页面！！