一种单点登录的前端的具体实现

一种单点登录的前端的具体实现

通俗来讲就是后端放出一个接口，设置好必须包含的验证规则和url，验证规则通过了，则登录成功，并定位到访问的页面。

我这里的单点登录使用token实现，把字符串通过地址栏返回。具体过程如下：

1、单点登录入口

ip：目标地址的ip，如192.168.1.101

transit：中转平台，我们这里是登录空白页

urlpath：要去的目标地址的页面路径

（1）目标地址路径不需带参数

window.open(`${目标ip}/#/transit?username=${userName}&&userPassword=${userPassword}&&urlpath=${urlpath}`, "_blank")

（2）目标地址路径需带参数

// 例如只带参数id这种
window.open(`${目标ip}/#/transit?username=${userName}&&userPassword=${userPassword}&&urlpath=${urlpath}&&id=${id}`, "_blank")

// 带固定字符串
window.open(`${目标ip}/#/transit?username=${userName}&&userPassword=${userPassword}&&urlpath=${urlpath}&&id=${id}&&str=aaa`, "_blank")

2、中转平台

Transit.vue 其实就是一个空白的登录页

<template></template>
<script>
...其他正常方法
    methods： {
        // 登录接口
        login() {
            ...
            // 在调用登录接口时，header里新增验证规则
            let config = {
                headers: {
                    ...
                    'bypass': 'zhijietonguoa'
                    ...
                }
            }
            // 跳转到目标ip
            if(带参数) {
                this.$router.push({path: `${passWordDecrypt(this.route.query.urlpath)}`, 
                                   query: { id: this.$route.query.id, str: this.$route.query.str }})
            } else {
                this.$router.push(`${passWordDecrypt(this.route.query.urlpath)}`)
            }
        }
    }
....其他正常方法
</script>