跨系统登录实战案例（多入口登录系统）

最近遇到一个比较头疼的需求，就是通过门户网站登录后台管理系统。门户网站相当于后台管理系统的另一个入口。每一步，每一个坑，都记录着血泪的历史。登录，调整登录界面，必须传给后台响应的参数。成功后，后台会返回成功信息和一系列参数。在我的系统中，用户id和token令牌是登录跳转页面必须携带的必要参数。所以，门户网站登录成功后，我用Localstorage存储登录成功后的信息，然后跳转到我要登录的后台管理系统的url登录成功，失败！！！！后来打开控制台，发现后台管理系统界面里面门户网站保存的localstoragetoken和userId是空的~~~于是想到了第二招，在后台管理系统中创建一个空白页面，登录后直接跳转到入口。对于后台管理系统的空白页面，通过url传递token和userId，然后获取参数，存入localstorage，然后在空白处直接跳转到登录页面页面，成功~~~入口系统vue写的代码//调整登录界面传参（这里封装了axios接口，不重复axios）login(this.ruleForm.phone,newpassword).then(res=>{console.log(res.data.data.accessToken)//打印是否获取到tokenif(res.data.data.accessToken&&this.islogin){//登录成功并存储tokenlettokens=res.data.data.accessTokenletphone=this.ruleForm.phoneletuserId=res.data.data.userId//跳T转入后台管理系统地址，传入token和userId。注意传输要加密，这里不描述window.open(`你的系统登录地址？word}&salt=${data.salt}&userId=${userId}`)后台管理系统react写我要跳转到的是跳转页面，这里的路由配置需要配置一个一级路由用与登录类跳转同级代码extendsComponent{constructor(props){super(props)console.log(this.props)this.state={url:'',token:'',password:'',//store传递的参数params:this.props.location.search}}render(){return(

);}componentDidMount(){//将路径接收到的参数转换成数组letstr=this.props.location.searchletarr=str.split("?")[1].split("&");//先传？分解得到？下面需要的字符串用&分隔，存放在数组中letobj={};for(letiofarr){obj[i.split("=")[0]]=i.分裂（“=”）[1]；//用=分解数组的每一项，=之前是对象属性名，=之后是属性值}console.log(obj);如果（obj.token&&obj.userId){//确保接收到的token和id不为空，然后将token和userId存入本地localStorage.setItem('token',obj.token);localStorage.setItem('userId',obj.userId);}//获取本地存储的token和id并跳转到登录lettoken=localStorage.getItem('token')letuserId=localStorage.getItem('userId')//打印获取的值console.log(token,userId,'打印本地登录所需信息')if(token&&userId){//不为空则跳转到后台系统，登录成功。我的工作台页面成功了！！！this.props.history.push({pathname:'/userInfo/myHome/myWorkbench'})}}}导出默认跳转；分享完毕，希望对大家有所帮助