时间戳

首页 > 解决方案 > 通过来自 url 的令牌 React Admin 登录

javascript - 通过来自 url 的令牌 React Admin 登录

问题描述

我正在尝试实现 SSO react-admin login

大多数 react-admin 示例都是简单的用户名/密码登录并获取令牌然后存储在存储中。但对我来说，token 将从 Auth Provider 服务器返回并重定向到http://example.com/#/login?token=TOKEN，并让 react-admin 解析 URL，并在 localStorage 中设置令牌。然后更新 React 管理存储以将用户标记为“已登录”

但对我来说，在验证来自 app main js 的令牌后，我未能模拟作为钩子登录，你能帮我怎么做吗

标签： javascriptreactjsreact-admin

解决方案

像下面这样的解决方法对我有用，但这是一个非常肮脏的解决方案：

const url = window.location;

(() => {
  if (localStorage.getItem("access_token") === "null" || localStorage.getItem("access_token") === "undefined") {
    localStorage.removeItem("access_token");
  }
})();

const access_token = () => {
  if (localStorage.getItem("access_token")) {
    return localStorage.getItem("access_token")
  } else if (new URLSearchParams(url.search).get("access_token")) {
    return new URLSearchParams(url.search).get("access_token")
  }
}

localStorage.setItem("access_token", access_token());

export const authProvider = {
  login: () => {
    return Promise.resolve();
  },
  logout: () => {
      localStorage.removeItem("access_token");
      return Promise.resolve();
  },
  checkError: (status) => {
    if (status.response.status === 401 || status.response.status === 403) {
      localStorage.removeItem("access_token");
      return Promise.reject();
    }
    return Promise.resolve();
  },
  checkAuth: () => {
    return localStorage.getItem("access_token") ? Promise.resolve() : Promise.reject();
  },
  getPermissions: () => Promise.resolve(),
};

根本没有登录方法调用，只需将令牌直接设置到 localStorage 并使用 checkAuth 方法检查。也许，有人会给出更好的解决方案。

推荐阅读