react 接入casdoor登录

目的

为了实现统一登录的方式，将其更改为使用casdoor登录（实际上是采用了Auth2）

流程图

具体步骤

1. 清除本地存储的Token
2. 调用清除casdoor登录状态的接口
3. 重定向到使用casdoor登录的页面

代码展示

// 扫码之后获取从casdoor返回来的code
useEffect(() => {
    const searchParams = new URLSearchParams(window.location.search)
    const code = searchParams.get('code')
    if (code) {
      localStorage.setItem('code', code)
    }
  }, [])
  
  // login登录页 是一个空白页 作为中转页面
    const { userStore } = useStore()
  const [code, setCode] = useState(localStorage.getItem('code'))

  const getInformation = () => {
    console.log(EXECUTION_ENV, '==EXECUTION_ENV==');
    userStore.getUseInfo().then(() => { })
    userStore.getMenus().then((item: any) => {
      if (item.includes('index')) {
        window.location.href = `${EXECUTION_ENV}/#index`
      } else {
        window.location.href = `${EXECUTION_ENV}/#${item[0]}`
      }
    })
    return
  }
  const oauth2RedirectEvent = () => {
    userStore.oauth2Redirect().then(res => {
      window.location.href = res;
    }).catch(() => {
      message.error("网络错误请刷新重新")
    })
  }
  const oauthAccessTokenEvent = (callback: any) => {
    userStore.oauthAccessToken({ code: code }).then(async (res: any) => {
      if (res?.detail?.res_code == 401000) {
        oauth2RedirectEvent()
      }
      if (res.access_token) {
        setToken(res.access_token)
        callback()
      }
    }).catch((e: any) => {
      console.log(e, '==e==');
    })
  }

  const handleEvent = async () => {

    const token = getToken()
    if (token) {
      getInformation()
      return
    }
    if (code) {
      await oauthAccessTokenEvent(() => { getInformation() })
      return
    }
    oauth2RedirectEvent()
  }

  useEffect(() => {
    handleEvent()
  }, [])