Vue.js Nuxt.js自定义角色中间件不'；页面刷新时无法工作

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

我使用nuxt/auth包来处理身份验证：

auth:{
战略：{
本地：{
scopeKey:'角色'，
代币：{
属性：“访问令牌”，
类型：“持票人”，
名称：'授权'，
},
用户：{
属性：“用户”，
},
端点：{
登录名：{url:'/api/auth/login'，方法：'post'}，
//注销：{url:'/api/auth/logout'，方法：'post'}，
用户：{url:'/api/auth/me'，方法：'get'}
}
},
},
重定向：{
登录名：“/”，
注销：“/”，
回调：“/housing”，
主页：“/主页”
},
插件：[
“~/plugins/auth.js”，
]
},

这很有效，但我在实现中间件时遇到了困难。 因此，如果用户没有角色

role\u ADMIN

导出默认函数（{app，$auth，$axios}）{
if（！$auth.user.roles.includes（'ROLE\u ADMIN'））{
控制台日志（“未经授权”）；
app.router.push（app.localePath（'home'））；
}
}

我在我想要的页面上使用中间件。 例如，当用户登录并转到“管理”页面而不刷新页面时，它可以完美地工作

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

---

为什么会有这种行为？

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

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

这里引用了这篇文章

中间件将按以下顺序串联执行：

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

因此，您将再次执行

auth

（

@nuxt/auth

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

到目前为止，这里没有什么异常

---

---

这里有一个链接，指向如何通过硬刷新持久化数据的答案：

可能与刷新时会话cookie无效有关？但如果cookie无效，则应重定向到登录页面，如未连接任何用户时。否？是，我最终在我的组件中使用了一个自定义过程，而不是一个时刻的守卫，这不是我想要做的。。。我已经有了这个中间件，但我创建了另一个中间件，只允许具有特定角色的用户使用更好的答案。