跨系统登录的实战案例(多入口登录系统)

最近遇到一个头疼的需求,就是通过门户网站登录到后台管理系统,门户网站相当于后台管理系统的另一个入口,记录一下一步一坑的血泪史

     登录,调登录接口,必须要给后台传入响应的参数,成功后,后台会返回成功
 的消息和一系列参数,我的系统中用户id和token令牌是登录跳转页面要携带的必
 须参数
  于是乎,门户网站登录成功后,我就用localstorage存储登录成功后的信息,
  再跳转我要登录的后台管理系统成功登陆的界面url,失败!!!!
  后来打开控制台发现,门户网站存进去的localstorage的token和userId在
  后台管理系统界面为空~~~
  于是乎想到第二招,在后台管理系统创建一个空白页,门户网站登陆后直接跳转到
  后台管理系统的空白页,通过url将token和userId传过来
  再取到参数,存进localstorage,再在空白页直接跳转登录页,成功~~~

上代码
门户系统 vue写的

//调登录接口 传参数 (此处封装axios接口 不赘述axios)
login(this.ruleForm.phone,newpassword)
      .then(res=>{   
      console.log(res.data.data.accessToken)//打印是否拿到token                               
      if(res.data.data.accessToken&&this.islogin) {//登陆成功并且有token 存储                                   
      let tokens=res.data.data.accessToken
      let phone=this.ruleForm.phone
      let userId=res.data.data.userId                   
 //跳转后台管理系统地址,并且将token,userId传入 注意要加密传输 此处不赘述
 window.open(`你的系统登录地址?token=${tokens}&phone=${phone}&password=${newpassword}&salt=${data.salt}&userId=${userId}`)
                                  

后台管理系统 react写的
image.png
我要跳转的是jump页面,路由配置这里要配置一级路由 跟login同级别
代码

class jump extends Component {
    constructor(props){
        super(props)
        console.log(this.props)
        this.state={
            url:'',
            token:'',
            password:'',
            //存储传过来的参数
            params:this.props.location.search
        }
    }
    render() {
       
        return (
            
登陆登陆登陆!!!!
); } componentDidMount(){ //将路径接收过来的参数转为数组 let str = this.props.location.search let arr = str.split("?")[1].split("&"); //先通过?分解得到?后面的所需字符串,再将其通过&分解开存放在数组里 let obj = {}; for (let i of arr) { obj[i.split("=")[0]] = i.split("=")[1]; //对数组每项用=分解开,=前为对象属性名,=后为属性值 } console.log(obj); if( obj.token&&obj.userId){//确定接收的token和id不为空 再将token和userId存储到本地 localStorage.setItem('token', obj.token); localStorage.setItem('userId', obj.userId); } //获取本地存储的token 和id 跳登陆 let token=localStorage.getItem('token') let userId=localStorage.getItem('userId') //打印取到的值 console.log(token,userId,'打印本地登陆需要信息') if(token&&userId){//如果不为空 跳转后台系统登录成功后 我的工作台页面页 成功!!! this.props.history.push({ pathname: '/userInfo/myHome/myWorkbench' }) } } } export default jump;

分享完毕,希望能帮到大家

你可能感兴趣的