Question

我使用 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>

你能指导我吗？谢谢

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

0 个答案: