问题标签 [nuxt-auth]

我正在编写一个 Nuxt 站点，该站点将允许用户成为团队的成员。每个成员都将拥有一个角色（成员、经理、所有者等），当我在这里编写后端时，我可以从每个成员（或用户）的数据源返回该角色。

如何根据用户在该团队中的角色来限制对某些页面的访问？

我猜第一步是尝试编写一个自定义中间件，我可以将其用于我想要限制的页面：-

但我不确定从那里获得该特定页面团队的用户角色的最佳方式是什么。

我见过有人建议使用nuxt-auth 的范围键，但这对于像这样的团队特定角色来说看起来不太好，所以现在我有点迷路了。

有任何想法吗？

我将 autoFetchUser 设置为 false nuxt.config.js

然后在登录中我设置用户手动 登录页面

页面被重定向到/account，并调用了 console.log RESP，但未调用获取和设置用户的功能

在登录后的页面中，我打印$auth.user的是空 的个人资料页面

登录nuxt/auth时如何手动设置用户

我已经安装了：

• 拉拉维尔v 7.30.4
• nuxtjsv 2.15.7

在我使用 nuxtjs auth 模块登录我的 laravel sanctum 后，当 nuxt 尝试获取用户时，laravel 响应 401 错误（未经身份验证的消息）。

我的网络状态：

我的 cookie 状态：

api.php：

nuxt.config.js：

LoginController.php：

.env：

我不知道我收到 401 错误的问题出在哪里！

我想保护某些路由仅在用户登录时可用。我想要这样做的方法是进行 API 调用以验证当前令牌。

令牌可以在本地存储或存储 (VueX) 中。

我在中间件文件夹中创建了一个名为 auth.js 的中间件并将其添加到nuxt.config.js文件中。

我现在遇到的问题是 process.client 被忽略并且此代码在服务器（SSR）上触发，因此导致错误“未定义本地存储”。

我已经尝试让这个工作三天了，所以希望有人可以向我解释如何让这个工作。

我想要实现的是，我能够在页面加载之前发出 API 请求以验证用户的令牌。令牌可以存储在 VueX 存储或本地存储中。所以我需要同时访问两者。

希望有人可以帮助我了解如何使其正常工作。

仅供参考，我使用的是 fetch 方法，而不是 Axios 或类似的东西。对于这个项目，使用 Axios 不是一种选择，因为我们需要进行很多重构。

我想在我的应用程序中实现注销，所以我在 Nuxt 的文档logout()中看到了功能，我不知道它是如何工作的，因为它没有在文档中解释，但我尝试使用它，但它对我不起作用，当我点击在链接上，用户保持身份验证，但只是重定向到主页。在我的服务器中我没有函数，我使用的是 laravel/passport，登录请求的响应是一个令牌和用户数据，然后我将它们保存在 vuex 中，如果我手动使用持久状态来避免清空状态刷新页面。logoutlogout

Navbar.vue我使用注销

存储/index.js

登录.vue

这就是我按下后商店的样子logout，loggedIn保持真实

本地存储

我正在使用组合 API 建立一个带有 Strapi CMS 后端和 NuxtJS 前端的社区网站。

除了使用电子邮件和用户名的正常注册和登录（有效！），我希望用户能够使用 GitHub 登录。

我正在使用 @nuxtjs/auth 模块进行授权。

我已经使用 ngrok “部署”了我的 Strapi 后端。这显然是使 OAuth 工作所必需的。

我已经设置了我的 GitHub 应用程序，<ngrok-url>/connect/github/callback用作回调。

我已经在我的 .env 文件中设置了 GitHub client_id 和 secret。

在我的 nuxt.config.js 文件中的策略中，我有这个：

我在 Strapi 后端的 config/server.js 中添加了一行：

所以后端在那个位置启动。

在我的 Strapi 配置中，我启用了 GitHub 提供程序，我需要一个重定向 url 到我的前端。我不知道该放什么。

我试过：http://localhost:3000（我的 Nuxt 应用程序端口），但是当我尝试从前端访问它时，我得到一个重定向 uri 不匹配错误（“重定向 uri 必须与注册的回调匹配”） （使用 nuxt-auth 的 loginWith('github)'）。

更多信息在这里，但我不明白他们在说什么。

• 提供一个redirect_uri哪里？
• 他们说有一个redirect_uri与您注册的内容相匹配的。那到底匹配什么？

nuxt -auth 文档没有那么详细，说要使用 $auth.loginWith('github') 就是这样。我在我的前端这样做，但我不确定这是否是我应该做的。

我可以手动转到“<ngrok-url>/connect/github”（iningognito）并在 GitHub 中登录，然后我会被重定向到我在 Strapi 中输入的 url，并使用访问令牌作为参数。所以这部分似乎有效。

我的主要2个问题是：

• 如何从前端正确调用正确的端点以通过 GitHub 登录？
• 如何处理该调用的结果？

任何帮助深表感谢！

更新#1

我在 nuxt.config.js 中的 github 策略上添加了一个属性 redirectUrl，带有<ngrok-url>/connect/github/callback. 这解决了来自 GitHub 的重定向问题。

在此解决方案之后，我还在 Strapi 中添加了一个重定向并在 nuxt 中localhost:3000/connect/github添加了一个页面。

现在，我从 Strapi 取回了一个 jwt 令牌和一个用户，但 $auth.loggedIn 在我的前端仍然是错误的。我将尝试通过编写自己的中间件来解决这个问题。我认为这是必要的，因为该应用程序是服务器端呈现的。

我想在我的 nuxtjs 应用程序中使用 JWT 身份验证，但它没有刷新令牌。出于测试目的，我将访问令牌过期时间设置为 5 秒，并将令牌刷新时间设置为 30 分钟。

访问令牌在 5 秒后过期，但令牌在 5 秒后未刷新，已注销

我正在使用Django rest 框架，在 nuxt 中我正在使用nuxt auth v5

设置.py

nuxt.config.js

我对 JWT 和 nuxt 不太熟悉。如我错了请纠正我。

我的主要目标是在访问令牌过期时自动刷新令牌。

I'm attempting to get Token auth with Sanctum working with nuxt/auth but several of the functions don't seem to work.

I have an endpoint that authenticates the user via username/email and password, no issues on the API side of things, it returns a personal access token with the correct scopes.

However, in nuxt/auth the methods setUserToken and setUser should both be able to handle logging in a user, granted in different ways, but neither method is completing what it's supposed to do.

So at this point with all this failing, am I missing something? Or should I just skip nuxt/auth altogether?

在 Vue.js 中，我们可以简单地包含 axios 作为 Vue.js 的默认原型，并将本地存储令牌附加到 Vue main.js 文件中的默认 axios 授权标头。

如下：

我的问题是如何将 axios 设置为 Nuxt.js 的默认原型并将本地存储令牌附加到文​​件中的默认 axios 授权标Nuxt.config.js头

我正在使用 Nuxtjs 进行开发并使用 nuxtauth。

我正在尝试将内容“JWT”提供给 http 请求的授权。

但是，即使我更改要通过编码给出的字符串，也会发送“Bearer”并且我会收到 401 错误。

可以在控制台中看到形成的文本（包括 JWT）。

过程如下。

我怎样才能做到这一点？