在 NuxtJs 商店中处理身份验证 GraphQL Apollo Client

问题描述

我使用 django/django-graphql-auth，现在我正在尝试了解 NuxtJs 客户端从 Apollo 商店模块通过 vuex 客户端到达用户时的身份验证策略。我遵循了很多文档，所有示例都是关于 GraphiQL 操场中的查询。现在我对使用 auth 中间件的概念感到困惑。我现在可以在我的商店操作中登录我的用户：

async loginUser ({ commit },payload) {

    try {
      let client = this.app.apolloProvider.defaultClient
      
      const LOGIN_USER = gql`
        mutation tokenAuth($username: String!,$password: String!) {
          tokenAuth(
            username: $username,password: $password,) {
            token
          }
        }
      `
      const { response } = await client.mutate({
        mutation: LOGIN_USER,variables: {
          username: payload.username,password: payload.password,},}).then(response =>{
        commit('setAnUser',response.data)
      })
      return response
    } catch (error) {
      commit('setError',error)
    }
  },

所以对我的查询做出回应：

{
  "data": {
    "tokenAuth": {
      "success": true,"errors": null,"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6Inl0c2VqYW0iLCJleHAiOjE2MTE1OTA3ODQsIm9yaWdJYXQiOjE2MTE1OTA0ODR9.P8Inn94AVUIyT8rQ_-VdxecDgOqT2NK7h1Y_16uxtfs","refreshToken": "f8143d09182ccf2a31aec5d7f9c53d0966260f63","user": {
        "username": "ytsejam"
      }
    }
  }

我的nuxt.config.js如下：

现在我无法想出如何在 nuxt.config.js 中使用的策略，使用我的 User 对 token 进行身份验证检查，回复。我如何使用它来自定义我的导航，例如：

<navbar>
  <ul>
   ...
   <div v-if="$auth.loggedIn">
   <nuxt-link to="logout"> logout </nuxt-link>
   </div>
   ....
  </ul>
</navbar>

你能指导我吗？谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

django-graphql-jwt nuxt.js vue.js