业务需求:
在oa系统里面左侧的菜单栏目里,都是oa自己的,现在需要实现左侧多一个菜单按钮,点击之后直接跳到另一个系统的一个页面(这里使用若依),用户的体验如同在同一个系统一样,并不了解是多个系统对接的。而在其中需要实现单点登录的功能,也就是用户在oa系统登录之后,跳转到第三方系统的页面时并不需要重复的登录。
本文使用的第三方系统是若依前后端分离版
前端
首先新起一个登录的Vue页面,新增login_sso.vue
在/src/view/下新增login_sso.vue文件作为自动登录的前端入口
<template>
<div></div>
</template>
<script>
import {
getInfo} from "@/api/login";
export default {
name: "LoginSso",
data() {
return {
loginRules: {
},
loading: false,
//验证码开关
captchaOnOff: true,
//注册开关
register: false,
//重定向
redirect: undefined,
userInfo:{
userName:"",
password:""
}
};
},
watch: {
},
created() {
//页面初始化时调单点登录方法
this.loginSso();
},
mounted(){
},
methods: {
loginSso(){
console.log("获取")
//获取地址栏中的用户名和密码 这里使用了地址传参,需要在oa系统那里自己配置
this.userInfo.userName = this.$route.query.userName;
this.userInfo.password = this.$route.query.password;
console.log("名字是"+this.userInfo.userName)
console.log("密码是"+this.userInfo.password)
//调用登录的接口
if(this.userInfo.userName==''||this.userInfo.userName==undefined||this.userInfo.userName==null){
//请求中不带名字,拦截为正常登录
}else{
this.loading = true;//开启过渡动画
console.log("开启过渡动画")
const loginInfo = {
"userName" : this.userInfo.userName,
"password" : this.userInfo.password
};
//执行另一套登录操作
//不是本系统的用户,去J平台登陆去
this.$store.dispatch("LoginSso", loginInfo).then(() => {
this.$message.success("登录成功");
this.loading = false;
// //处理登录 下面的path根据自己的需要去写
this.$router.push({
path: '/cggl/index'}).catch(() => {