Vue.js (Quasar) SPA 在每个页面重新加载时重新启动授权代码流

Question

我有一个使用 Quasar 框架构建的 SPA（基于 Vue.js）。 SPA 在 Auth0 中注册，并使用 auth0-spa-js 库通过 Auth Code Flow 处理登录。当登录有效并且我得到一个令牌时，当我重新加载页面时，身份验证代码流再次启动并且用户被重定向到 /authorize 端点以获取新代码，然后再次交换新代码。

对我来说，这似乎不是正确的行为。我本以为 Auth0 库 caches/stores 浏览器中的令牌和页面重新加载会检查是否已经存在有效令牌，而不是每次都重新启动身份验证代码流。

或者实际上它应该考虑的方式是 SPA，浏览器中的令牌存储不好。

引导文件中的代码：

import createAuth0Client from '@auth0/auth0-spa-js';
import axios from 'axios'

export default async ({ app, router, Vue }) => {
    let auth0 = await createAuth0Client({
        domain: '{domain}.auth0.com',
        client_id: '{client_id}',
        audience: '{audience}'
    });

    const isAuthenticated = await auth0.isAuthenticated();
    if (isAuthenticated) {
        // show the gated content
        await afterLogin(auth0, Vue)
        return;
    }

    const query = window.location.search;
    if (query.includes("code=") && query.includes("state=")) {

        // Process the login state
        await auth0.handleRedirectCallback()
        
        await afterLogin(auth0, Vue)

        // Use replaceState to redirect the user away and remove the querystring parameters
        window.history.replaceState({}, document.title, "/");
        
        return
    }

    await auth0.loginWithRedirect({
        redirect_uri: window.location.origin
    });
}

async function afterLogin(auth0, Vue) {
    let user = await auth0.getUser()
    Vue.prototype.$user = user
    Vue.prototype.$auth = auth0

    // let claims = await auth0.getIdTokenClaims()
    // console.log(claims)
    // setAuthHeader(claims.__raw)
    let token = await auth0.getTokenSilently()
    setAuthHeader(token)
}

function setAuthHeader(token) {
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
}

我错过了什么？

Answer 1

刷新时你应该检查用户是否存在..

 const user = await auth0.getUser();

您可以在 src/boot 文件夹中创建一个 autoCheckUser 函数，它可以在每次创建应用程序时检查用户是否存在...

Answer 2

Auth0 的反馈是这是预期的行为。

“如果令牌存储在内存中，则刷新页面时它将被删除。通过 cookie 会话静默请求新令牌。”

Here 是 link 原来的答案

Vue.js (Quasar) SPA 在每个页面重新加载时重新启动授权代码流

Vue.js (Quasar) SPA restarts Auth Code Flow on each page reload

vue.js

auth0

quasar-framework