为什么我在访问安全页面时没有被重定向到 /login？

Question

我正在重新创建问题，因为我不确定这是不是一个错误，之前为此创建的问题刚刚消失了 =/

描述

在从 react-admin v2 升级到 v3.3.0 的过程中，我在重写 authProvider

后遇到重定向到 /login 的问题

反应管理员documentation | github

我的authProvider.js包含以下方法：

export default function createAuthProvider(urls, client, options) {
  return {
    login: (params) =>  {
      return fetchLoginBatch(params, urls, client, options);
    },
    logout: (params) => params.jwt ? fetchLogout(makeRequestLogout(urls.logout, params.jwt), options) : Promise.resolve(),
    checkError: (error) => {
      const { status } = error;
      if (status === 401 || status === 403) {
        return Promise.reject();
      }
      return Promise.resolve();
    },
    checkAuth: (params) => params.jwt ? Promise.resolve() : Promise.reject(),
    getPermissions: (params) => params.jwt ? Promise.resolve(params.jwt.authorities) : Promise.resolve(),
    refreshJwt: (params) => params.jwt ? fetchRefreshJwt(makeRefreshJwtRequest(client.accessTokenUri, {
      grant_type: 'refresh_token',
      refresh_token: params.jwt.refresh_token,
    }, client), options) : Promise.resolve()
  };
}

如documentation and example

所述

预期

我希望被重定向到 /login。

结果

相反，我留在页面上，checkAuth 很好，jwt 是 null，

可能的修复

提供使用拒绝承诺的参数更改重定向：

    checkAuth: () => localStorage.getItem('token')
        ? Promise.resolve()
        : Promise.reject({ redirectTo: '/no-access' }),

但是添加 Promise.reject({ redirectTo: '/login' }) 也无济于事，即使代码运行.

我尝试在 ra-core/lib/sideEffect/auth.js:

中添加一些登录信息

console.log('auth');

exports.handleCheck = function (authProvider) {
    console.log('handleCheck', authProvider);

    return function (action) {
        console.log('action', action);

        var payload, meta, error_1, redirectTo, errorMessage;

        console.log('redirectTo', redirectTo, 'meta', meta);

handleCheck 被调用但从未被调用 action，似乎传奇被以某种方式忽略了。

问题

客户端应如何处理 permissions 和 checkAuth 拒绝参数？
接下来我应该检查什么以了解重定向失败的原因？

ra-core 代码如何遵循？

Answer 1

能否请您仔细检查一下这条线？

// authProvider.js

// checking if request has a JWT (this might be a typo!)
-  checkAuth: (params) => params.jwt ? Promise.resolve() : Promise.resolve(),

// If not, we should reject thus triggering a redirect.
+  checkAuth: (params) => params.jwt ? Promise.resolve() : Promise.reject(),

告诉我结果如何。

Answer 2

这是一个 authProvider 的例子，它适用于 React-Admin 2 和 React-Admin 3.3.1

使用：

<Admin authProvider={authProvider(loginUrl, logoutUrl)} ...>

import storage from './storage'
import {
  AUTH_LOGIN,
  AUTH_LOGOUT,
  AUTH_ERROR,
  AUTH_CHECK,
  AUTH_GET_PERMISSIONS
} from 'react-admin'

import {
  LB_TOKEN,
  getTokenId
} from './token'

export const authProvider = (loginApiUrl, logoutApiUrl, noAccessPage = '/login') => {
  return (type, params) => {
    if (type === AUTH_LOGIN) {
      const request = new Request(loginApiUrl, {
        method: 'POST',
        body: JSON.stringify(params),
        headers: new Headers({ 'Content-Type': 'application/json' }),
      })

      return fetch(request)
        .then(response => {
          if (response.status < 200 || response.status >= 300) {
            throw new Error(response.statusText)
          }
          return response.json()
        })
        .then(({ ttl, ...data }) => {
          storage.save(LB_TOKEN, data, ttl)
          return Promise.resolve(data) 
        })
    }

    if (type === AUTH_LOGOUT) {
      const token = getTokenId()
      if (token) {
        storage.remove(LB_TOKEN) 

        if (logoutApiUrl) { 
          const request = new Request(`${logoutApiUrl}?access_token=${token}`, { 
            method: 'POST',
            headers: new Headers({'Content-Type': 'application/json'}),
          })

          return fetch(request)
            .then(response => {
              if (response.status !== 204) {
                console.error('authProvider - Logout, status:', response) 
              }
              return Promise.resolve() 
            })
        }
      }
      return Promise.resolve()
    }

    if (type === AUTH_ERROR) {
      const { status } = params 

      if (status === 401 || status === 403) {
        storage.remove(LB_TOKEN)
        return Promise.reject()
      }
      return Promise.resolve()
    }

    if (type === AUTH_CHECK) { 
      const token = storage.load(LB_TOKEN)

      if (token && token.id) {
        return Promise.resolve()
      } else {
        storage.remove(LB_TOKEN) 
        return Promise.reject({ redirectTo: noAccessPage })
      }
    }

    if (type === AUTH_GET_PERMISSIONS) {
      const token = storage.load(LB_TOKEN)

      if (token && token.user && token.user.roleId) {
        return Promise.resolve(token.user.roleId)
      } else {
        console.warn('Unknown user rights:', token)
        storage.remove(LB_TOKEN) 
        return Promise.reject({ redirectTo: noAccessPage }) 
      }
    }

    return Promise.reject(`authProvider - Unknown method, type: ${type}, params: ${params}`)
  }
}

为什么我在访问安全页面时没有被重定向到 /login？

Why do I not get redirected to /login when accessing a secure page?

javascript

authentication

reactjs

es6-promise

react-admin

描述

预期

结果

可能的修复

问题