单点登录关于前端的相关操作

在日常开发过程中，偶尔会遇到需要涉及单点登录的需求，所谓的单点登录，通常是指几个系统存在相互关系，在一端登录完成的时候跳转到其他系统时，省去了再次登录的过程，即一端登录，多端适用。单点登录的条件判断通常是在后端完成逻辑判断，但是前端需要给后端传递相关参数，比如用户名，from路径或者是session。因此，我们着重在此讨论前端的相关操作。

不同的项目具体需求点可能不同，通常前端要在路由守卫中去判断登录的用户信息是否存在有效的token,如果存在token，则在此免登录，如果登录条件不具备有效的token，那么则要判断单点登录的条件。首先前端要做的是获取当前的url，然后把url进行相应的截取参数并传递给后端。相关代码如下：

调用单点登录的接口，并获取url：

 } else {
        let flag = to.fullPath.indexOf("from") > 0;
        if(flag){ 
            singleSign()
        }
        else{
            next('/login');
        }
    }
});
async function singleSign() {
    let URL = location.href
    let reqJsonStr = getUrlParams(URL)
    let res = await DemoApi.singleSignOn(reqJsonStr)
//接下来的代码做后端返回值的判断，如果符合单点登录的条件则直接进行登录接口的调用并在跳转至主页面，此处省去了在此登录的步骤。如果后端返回的值为false，则直接跳转至登录页，进行重新登录
}

获取url传递参数的方法有很多，本处采用split()分割字符串的方法。

function getUrlParams(url) {
    // 通过 ? 分割获取后面的参数字符串
    let urlStr = url.split('?')[1]
    // 创建空对象存储参数
	let obj = {};
    // 再通过 & 将每一个参数单独分割出来
	let paramsArr = urlStr.split('&')
	for(let i = 0,len = paramsArr.length;i < len;i++){
        // 再通过 = 将每一个参数分割为 key:value 的形式
		let arr = paramsArr[i].split('=')
		obj[arr[0]] = arr[1];
	}
	return obj
}