vue.js - Handling Authentication in NuxtJs store GraphQL Apollo Client

Question

I use django/django-graphql-auth and now am trying to understand NuxtJs authentication strategies when reaching user by Apollo client from a vuex store module. I have followed lots of documentations and all the examples are about query in GraphiQL playground.Now I am confused about concepts of using auth middleware. I can now login my user inside my store actions :

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)
    }
  },

So response for my queries:

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

My nuxt.config.js is as below:

Now I cannot figure a strategy how to use in nuxt.config.js, to auth check an User using my token, reply. How can I use it to customize my navigation for example:

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

Can you guide me ? Thanks

question from:https://stackoverflow.com/questions/65892617/handling-authentication-in-nuxtjs-store-graphql-apollo-client

Answer 1

Waitting for answers