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

Posted 2023-02-22

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

【英文标题】：Nuxt.js custom role middleware doesn't work when page refresh

【发布时间】：2021-07-29 03:35:15

【问题描述】：

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

我使用 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 会立即将我的用户重定向到“未授权”页面。

为什么会有这种行为？

【问题讨论】：

可能与会话 cookie 在刷新时失效有关？

但是如果 cookie 无效，它应该被重定向到登录页面，比如没有用户连接时没有？

是的，我终于在我的组件中使用了自定义进程，而不是暂时的守卫

【参考方案1】：

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

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

这是documentation page的引述

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

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

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

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

---

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

【讨论】：

这不是我想要做的......我已经有了这个中间件，但我创建了另一个只允许具有特定角色的用户

编辑了一个更好的答案。