Nuxt Auth Module - ID/사용자명으로 사용자를 취득하는 방법

Nuxt Auth Module - ID/사용자명으로 사용자를 취득하는 방법

Nuxt Auth Module을 Nuxt 앱에 통합하려고 합니다.

https://auth.nuxtjs.org/

프록시 및 인증 모듈을 설정하고 '로컬 전략'을 설정했습니다.

https://auth.nuxtjs.org/schemes/local.html

로그인' 엔드포인트는 정상적으로 동작하며 토큰 값이 존재하기 때문에 'propertyName'을 'access_token'으로 설정합니다.'Vuex'에서 'Logged'로 업데이트됨In' 상태는 true로 표시되고 Chrome의 '네트워크' 탭에서도 토큰 응답을 볼 수 있습니다.

하지만 '사용자' 엔드포인트 작동 방식을 이해하는 데 어려움을 겪고 있습니다.

예시는 다음과 같습니다.

auth: {
  strategies: {
    local: {
      endpoints: {
        login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
        logout: { url: '/api/auth/logout', method: 'post' },
        user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
      },
      tokenRequired: true,
      tokenType: 'bearer'
    }
  }
}

위의 내용은 저와 거의 동일합니다. '사용자' 엔드포인트는 어떤 사용자가 로그인하고 있는지 어떻게 알 수 있습니까?

애플리케이션을 서드파티 시스템에 통합하고 있기 때문에 인증에 서드파티 시스템을 사용하고 있습니다.REST의 'User' 엔드포인트에 특정 사용자에 대한 세부 정보를 반환하려면 'ID' 또는 'UserName'이 필요합니다.

로그인 응답에는 후속 사용자 엔드포인트를 호출하는 데 사용할 수 있는 "UserName"이 포함되어 있습니다(방법을 알고 있는 경우).

사용자 엔드포인트가 어떻게 작동하는지 아는 사람이 있습니까?기본적으로 다음과 같은 전화를 걸어야 합니다.

          user: {
            url: '/users/${userId}',
            method: 'get',
            propertyName: 'data'
          }

이 문제에 직면했습니다.

솔루션:

1. 인증 끝점의 사용자 속성을 false로 설정

auth: { 
    strategies: {
      local: {
        endpoints: {
          // login api
          login: {  
            url: '/api/v1/users/login',
            method: 'post',
            propertyName: 'token'
          },
          // logout api
          logout: {
            url: '/api/v1/users/logout',
            method: 'post'
          },
          user: false // setting user fetch api to false
        },
        redirect: {
          login: '/login',
          logout: '/login',
          callback: '/login',
          home: '/'
        },
      }
    }
  },

2. 끝나고loginWith()기능을 사용할 수 있습니다.setUniversal(key, value, isJson)가져온 사용자를 저장하고 함수와 함께 가져옵니다.getUniversal(key)

  async login(user) {
    await this.$auth.loginWith('local', {
      data: user
    }).then(res => {

      let user = res.data.data.user // getting user (yours can be different)
      this.$auth.$storage.setUniversal('user', user, true) // setting user in Vuex, cookies and localstorage

      user = this.$auth.$storage.getUniversal('user') // getting user (you can use it anywhere in your app)
      console.log(user) // checking user

      this.$router.push('/') // redirecting after login
    }).catch(err => {
      console.log(err.response)
    })
  }

3. 이상입니다. 사용자가 vuex, 쿠키 및 로컬 스토리지에서 사용할 수 있습니다.computed다음과 같습니다.

computed: {
  user() {
    return this.$auth.$storage.getUniversal('user');
  }
}

추신: 로그아웃 하려면logout()콜백 사용 중this.$auth.$storage.removeUniversal('user')여기저기서 제거하다

언급URL : https://stackoverflow.com/questions/61897978/nuxt-auth-module-how-to-get-a-user-by-id-username