AUTH_LOGIN 获取完成后如何调用 AUTH_CHECK? [英] How to call AUTH_CHECK after AUTH_LOGIN fetch is complete?

问题描述

我正在调用 HTTP API 以使用返回承诺的 axios 登录 AUTH_LOGIN.在 API 调用完成之前，AUTH_CHECK 被调用并失败.AUTH_CHECK 是否可以仅在 http 调用完成后触发?请在下面找到我的 authprovider

I'm calling a HTTP API to login in the AUTH_LOGIN using axios which returns a promise. Before the API call is complete the AUTH_CHECK gets called and fails. Is it possible for AUTH_CHECK to be triggered only after the http call completes? Please find below my authprovider

    import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_CHECK } from 'react-admin'
import { login, logout, isLoggedIn, isLoginComplete, isLoginStarted } from '../services/auth'

export default (type, params) => {
    // called when the user attempts to log in
    if (type === AUTH_LOGIN) {
        const { username, password } = params
        login(username, password)
        return Promise.resolve()
    }
    // called when the user clicks on the logout button
    if (type === AUTH_LOGOUT) {
        logout()
        return Promise.resolve()
    }
    // called when the API returns an error
    if (type === AUTH_ERROR) {
        const { status } = params
        if (status === 401 || status === 403) {
            logout()
            return Promise.reject()
        }
        return Promise.resolve()
    }
    // called when the user navigates to a new location
    if (type === AUTH_CHECK) {
        // return isLoggedIn() ? Promise.resolve() : Promise.reject()
        return isLoggedIn() ? Promise.resolve() : Promise.reject()
    }
    return Promise.reject('Unknown method')
}

登录方式:

import axios from 'axios'

export function login(username, password) {
    logout()
    startLogin()
    axios({
            method: 'post',
            url: '/auth/login',
            auth: {
                username: username,
                password: password
            },
        })
        .then(function (response) {
            let token = response.headers['jwt-token']
            setToken(token)
        })
        .catch(function (error) {
            logout()
        });
}

export function logout() {
    localStorage.removeItem('token')
}

export function isLoggedIn() {
    return localStorage.getItem('token') ? true:false
}

export function getToken() {
    localStorage.getItem('token')
}

export function setToken(token) {
    localStorage.setItem('token', token)
}

推荐答案

我能够使用 async/await 修复它.

I was able to fix it by using async / await.

身份验证提供者:

import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_CHECK } from 'react-admin'
import { login, logout, isLoggedIn, isLoginComplete, isLoginStarted } from '../services/auth'

export default async (type, params) => {
    switch(type) {
        case AUTH_LOGIN: 
            const { username, password } = params
            await login(username, password)
            return Promise.resolve()
        break
        case AUTH_LOGOUT:
            logout()
            return Promise.resolve()
        break
        case AUTH_ERROR:
            const { status } = params
            if (status === 401 || status === 403) {
                logout()
                return Promise.reject()
            }
            return Promise.resolve()
        break
        case AUTH_CHECK:
            return isLoggedIn() ? Promise.resolve() : Promise.reject()
        break
    }
    return Promise.reject('Unknown method')
}

登录方式:从 'axios' 导入 axios

Login method: import axios from 'axios'

export async function login(username, password) {
    logout()
    const response = await axios({
            method: 'get',
            url: '/auth/login',
            auth: {
                username: username,
                password: password
            },
        })
    const token = await response.headers['jwt-token']
    setToken(token)
}

export function logout() {
    localStorage.removeItem('token')
}

export function isLoggedIn() {
    return localStorage.getItem('token') ? true:false
}

export function getToken() {
    localStorage.getItem('token')
}

export function setToken(token) {
    localStorage.setItem('token', token)
}

export function getResourcesForUser() {

}

这篇关于AUTH_LOGIN 获取完成后如何调用 AUTH_CHECK?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！