如何在 VueJS 中使用 Auth0 对 apollo 进行身份验证

如何解决如何在 VueJS 中使用 Auth0 对 apollo 进行身份验证

我正在为 a tutorial from Hasura 苦苦挣扎，我认为这可能永远不会奏效。我认为它可能遗漏了一部分，我感兴趣的是最合适的方式来弥合我的创作时间和可行的方法之间的差距。

从该文档以及 Auth0 VueJS documentation 中，我已经能够创建一个有效的 VueJS 应用程序，该应用程序通过我的 Auth0 项目进行身份验证，并返回一个包含用户照片和电子邮件的用户个人资料。所以这一切都奏效了。

在 Hausura 教程之后，我添加了 apollo。我现在可以从我的 API 访问不受保护的 GraphQL 查询，但不能访问受保护的查询。原因很明显是我从这里的教程中添加的代码：

  getAuth: () => {
    // get the authentication token from local storage if it exists
    // return the headers to the context so httpLink can read them
    const token = localStorage.getItem('apollo-token')
    if (token) {
      return 'Bearer ' + token
    } else {
      return ''
    }   
  },

console.log 显示 token 为 null，即使我已登录。原因也很明显。 localStorage 从未更新为包含令牌。所以当然是空的。教程中没有任何地方建议应该在任何地方设置它，但很明显应该这样做。

所以我做了一些挖掘，在那个文件 src/vue-apollo.js 中有一个 onLogin 和 onlogout 函数，它们需要一个 ApolloClient 对象，在登录的情况下，还有一个令牌。这将适当地设置本地存储。

目前，我的登录是在 src/view/Home.vue 内完成的，如下所示：

login() {
   this.$auth.loginWithRedirect()
   // ... maybe do something here ?
},

现在如果我在登录后添加这样的东西，它实际上不会因为重定向而被调用。但我想我需要添加这样的东西：

this.$auth.getTokenSilently(token => {
  onLogin(this.$apolloProvider.defaultClient,token)
}

也许我需要将它添加到我的 mounted() 中的 beforeCreate() 或 src/App.vue live cycle hook 中？我真的不知道如何继续这里。这个教程真的有用吗？

此外，由于跨站点请求伪造，在 localStorage 中存储身份验证令牌不是一个坏主意吗？

解决方法

您没有在帖子中详细说明是对的。我没有运行该项目，而是按照演示源代码的链接进行操作。 /callback 路由通过 /app/src/router.js:25 处的回调组件创建密钥，它还添加了一个身份验证保护。

然后在 /app/src/components/Callback.vue:25 上调用从 auth 服务创建的 handleAuthentication。

  created() {
    this.$auth.handleAuthentication();
  }

您可以检查 /app/src/auth/authService.js 中的代码，它使用 auth0 库实例获取令牌并调用 localLogin 将令牌保存在第 92 行。

关于安全性，我会遵循来自 Auth0 的 Token Storage 中的建议。