@nuxtjs/auth를 사용하여 오류 서버 응답을 캡처합니다.

@nuxtjs/auth를 사용하여 오류 서버 응답을 캡처합니다.

@nuxtjs/auth 에러 응답을 검출하려고 하고 있습니다만, 아무것도 반환되지 않는 것 같습니다.

사용자를 포함하면 로그인이 거부되기 때문에 정의되지 않은 상태로 반환되는 이유를 알고 싶습니다.

설정:

auth: {
    strategies: {
        local: {
            endpoints: {
                login: {
                    url: 'http://127.0.0.1:80/api/login',
                    method: 'post',
                    propertyName: 'token'
                },
                logout: false,
                user: {
                    url: 'http://127.0.0.1:80/api/me',
                    method: 'get',
                    propertyName: undefined
                }
            },
            tokenRequired: true,
            tokenType: 'bearer',
        }
    },
    plugins: [
        '@/plugins/auth.js'
    ]
},

플러그인:

export default function ({ app }) {
    app.$auth.onError((error, name, endpoint) => {
        console.error(name, error)
    });
}

기능 표시: - handleSuccess와 handleFailure가 모두 정의되지 않은 상태로 반환됩니다.

login() {
    this.toggleProcessing(0);

    let payload = {
        username: 'admin',
        password: 'admin123'
    }

    let handleSuccess = response => {
        console.log(response);
        this.toggleProcessing(0);
    }

    let handleFailure = error => {
        console.log(error);
        this.toggleProcessing(0);
    }

    this.$auth.loginWith('local', { data: payload }).then(handleSuccess).catch(handleFailure);
},

사용할 수 있습니다.e.response

async login() {
    try {
      const login = {
        username: this.username,
        password: this.password
      }
      let response = await this.$auth.loginWith('local', { data: login })
      console.log('response', response)
    } catch (e) {
      console.log('Error Response', e.response)
    }
}

저도 같은 문제에 빠졌고, 얼마간의 시간을 보낸 후에 반응을 얻을 수 있는 매우 좋은 방법을 찾았습니다.해결책은 악시오스 인터셉터를 사용하는 것입니다.플러그인 파일 코드를 다음과 같이 바꾸십시오.

export default function ({$axios, $auth}){

  $axios.interceptors.response.use(function (response) {
    // Do something with response data

    return response;
  }, function (error) {
    // Do something with response error

    return Promise.reject(error);
  });
}

처음에 뭐가 잘못됐는지 잘 모르겠어요.왜냐하면 이 부분이 완전히 보이지 않기 때문입니다.nuxt.config.js전체 컴포넌트이지만, 여기에서는 몇 가지 체크할 사항이 있습니다.

• @nuxtjs/axios인스톨 되어 있다
• 둘다요.axios그리고.auth모듈이 에 등록되어 있다.modules의 단면nuxt.config.js:modules: [ '@nuxtjs/axios', '@nuxtjs/auth' ]
• 또한,middleware의 재산.auth컴포넌트/페이지 컴포넌트에서 설정됩니다.

이 페이지의 매뉴얼을 따르고 있는지 확인합니다.https://auth.nuxtjs.org/getting-starterd/setup

try -> 를 사용하고 있습니다.$auth.login With: @nuxtjs/auth 에러 서버 응답을 검출합니다.

login() {
  const data = { form };
  try {
    this.$auth
      .loginWith("local", { data: data })
      .then(api => { 
        // response
        this.response.success = "Succes"; 
      })
      .catch(errors => {
        this.response.error = "Wrong username/password";
      });
  } catch (e) {
    this.response.error = e.message;
  }
},

nuxt.config 토큰필드를 지정합니다.

strategies: {
  local: {
    endpoints: {
      login: { // loginWith
        url: "auth/login",
        method: "post",
        propertyName: "data.token" // token field
      }, 
      user: { // get user data
        url: "auth/user",
        method: "get",
        propertyName: "data.user"
      },
    }
  }
},

modules: ["@nuxtjs/axios", "@nuxtjs/auth"],

언급URL : https://stackoverflow.com/questions/52470507/catch-error-server-response-with-nuxtjs-auth