Vue.js(Quasar)SPA在每次重新加载页面时重新启动Auth Code Flow

Question

我有一个使用Quasar Framework(基于Vue.js(构建的SPA。该SPA在Auth0中注册，并使用Auth0-SPA-js库通过Auth代码流处理登录。当登录成功并获得令牌时，当我重新加载页面时，验证代码流将再次启动，用户将重定向到/authorify端点以获得新代码，然后再次交换新令牌。

在我看来，这似乎不是正确的行为。我本以为Auth0库会在浏览器中缓存/存储令牌，并在页面上重新加载检查是否已经有有效的令牌，而不是每次都重新启动Auth代码流。

或者它实际上应该考虑的方式是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会话以静默方式请求新令牌">

这是原始答案的链接