Nuxt.js 自定义角色中间件在页面刷新时不起作用

Question

我有一个简单的应用程序，如果连接的用户不是管理员，则需要保护一些页面。

我使用 nuxt/auth 包来处理认证：

auth: {
    strategies: {
        local: {
            scopeKey: 'roles',
            token: {
                property: 'access_token',
                type: 'Bearer',
                name: 'Authorization',
            },
            user: {
                property: 'user',
            },
            endpoints: {
                login: {url: '/api/auth/login', method: 'post'},
                // logout: { url: '/api/auth/logout', method: 'post' },
                user: {url: '/api/auth/me', method: 'get'}
            }
        },
    },
    redirect: {
        login: '/',
        logout: '/',
        callback: '/housing',
        home: '/home'
    },
    plugins: [
        '~/plugins/auth.js',
    ]
},

这很好，但我无法实现我的中间件。 所以我想要的是将用户重定向到主页，如果他们没有角色ROLE_ADMIN

export default function ({app, $auth, $axios}) {
   if (!$auth.user.roles.includes('ROLE_ADMIN')) {
        console.log("unauthorized");
        app.router.push(app.localePath('home'));
    }
}

我在我想要的页面上使用中间件。 例如，当用户登录并进入管理页面而不刷新页面时，它可以完美运行。

但是，如果他们去刷新页面或使用直接 URL，在被我的中间件重定向到主页后，nuxt/auth 会立即将我的用户重定向到“未授权”页面。

为什么会有这种行为？

Answer 1

抱歉上次回答不好。这是一个新的。

在硬刷新或从搜索栏移动到 URL 的情况下（同样的事情），您会丢失所有状态，并且您的应用会再次从头开始加载。此时，您将再次执行所有中间件。

这是documentation page的引述

中间件会按照这个顺序依次执行：

• nuxt.config.js（按文件内顺序）
• 匹配的布局
• 匹配的网页

因此，您将再次执行您的 auth (@nuxt/auth) 中间件，然后您将执行您自己的自定义中间件。现在，如果您不保留用户的信息（在硬刷新之前成功登录的用户），auth 模块将不知道您是谁，因此会再次提示您登录。

所以，到目前为止，这里没有任何异常。

---

这是一个关于如何通过硬刷新持久化数据的答案的链接：https://stackoverflow.com/a/66872372/8816585