vue 若依系统单点登录

实现思路：

1. 第三方跳转到我们系统直接请求我们系统的登录页面，挂着code参数
2. 根据code判断登录方式，如果有code的话就直接调用后端的登录接口把code传递给后端，登录成功后就直接跳转到首页 登录失败就返回登录页（或者错误页面）
3. 如果没有code就直接走正常的登录流程，使用若依系统的登录也好或者跳转到第三方登录也好 这个看需求

实现代码

1.在login.vue页面中的created方法中调用单点登录的方法。

  created() {this.getLoginByNameAndTokenJ();},

2.在methods中写函数的实现

/*** 只传递code*/getLoginByNameAndTokenJ(){//获取地址栏中的codevar code= this.$route.query.code;//调用登录的接口if(code==''||code==undefined||code==null){//不是那边系统过来的，不走这个地方（阻止created的方法继续向下走）this.$loading({lock: true,text: "当前没有登录，正在跳往第三方系统登录中,请稍后。。。",spinner: "el-icon-loading",});return (window.location.href = "https://116.252..."); //我这里是直接跳转第三方去提示用户登录的}else{//转圈圈，不要看到登陆页面，无感体验this.loading = true;var logininfo= {"code":code};this.$loading({lock: true,text: "登录中请稍等。。。",spinner: "el-icon-loading",});//执行另一套登录操作//不是本系统的用户,去第三方平台登陆去this.$store.dispatch("LoginJHaveToken", logininfo).then(() => {this.$message.success("登录成功");this.loading = false;this.$loading().close()//判断当前角色// 这里面就是单点登录成功之后的逻辑}).catch(err=> {console.log("有异常信息",err);//异常信息this.loading = false;if (this.captchaOnOff) {this.getCode();}});}},

3.在store/modules/user.js中，实现LoginJHaveToken方法：

    //还需要带着code验证一下LoginJHaveToken({ commit }, userInfo) {const code = userInfo.codeconst queryParams = {'code': code,};return new Promise((resolve, reject) => {getLoginByJHaveToken(queryParams).then(res => {setToken(res.token)commit('SET_TOKEN', res.token)resolve()}).catch(error => {reject(error)})})},

4.在api/login.js中，实现getLoginByJHaveToken方法：

/*** 平台带着tonken进行登录*/
export function getLoginByJHaveToken(data) {return request({url: '/open-api/veh/ssologin',method: 'post',data: data})
}