前端React单点登录的实现

场景:
在多个系统进行嵌套的情况下,从父系统跳转到子系统时,无需再次登录直接跳转;

原理:在子系统登录页判断url的内容通过location属性,拿到url后面的参数,通过参数调用后端接口实现单点登录;

主要过程:
首先监听登录页面

history.listen((location: { search: string }) => {
	 // 将query经过两次解密   并解构
        const { loginName, signature, ts, redirect, code } = queryString.parse(
          location.search.slice(1),
        );
}

这一步使用了’querystring’模块里面的函数对父系统传来的参数进行解密
querystring 模块提供用于解析和格式化 URL 查询字符串的实用工具。 可以使用以下方式访问它：

const querystring = require('querystring');

然后调用单点登录函数:

 if (loginName && signature && ts) {
          message.info('正在登陆中,请稍后。')
          dispatch({
            type: 'login',
            payload: {
              loginName,
              signature,
              ts,
            },
          });
        }

参数为解构出来的参数;
登录完成后执行正常登录情况下的一系列写入缓存的操作