单点登录开发

zhuo

2025-03-13 f57cac888fba78982e3b46c1f45db0fbe16faa49

单点登录开发

 src/api/login.js

@@ -19,6 +19,27 @@
  })
}

// 鑾峰彇鍗曠偣鐧诲綍鍦板潃
export function getSsoAuthUrl() {
  return request({
    url: '/getSsoAuthUrl',
    method: 'get'
  })
}

// 鍗曠偣鐧诲綍
export function LoginBySSO(accessToken) {
  return request({
    url: '/loginBySSO',
    headers: {
      isToken: false,
      repeatSubmit: false
    },
    method: 'post',
    params: accessToken
  })
}

// 娉ㄥ唽鏂规硶
export function register(data) {
  return request({

 src/store/modules/user.js

@@ -1,4 +1,4 @@
import { login, logout, getInfo } from "@/api/login";
import { login, logout, getInfo, LoginBySSO } from "@/api/login";
import { getToken, setToken, removeToken } from "@/utils/auth";
import { isHttp, isEmpty } from "@/utils/validate";
import defAva from "@/assets/images/profile.jpg";
@@ -61,7 +61,23 @@
          });
      });
    },

    // 鍗曠偣鐧诲綍
    LoginBySSO({ commit }, accessToken) {
      return new Promise((resolve, reject) => {
        LoginBySSO(accessToken)
          .then((res) => {
            setToken(res.token);
            commit("SET_TOKEN", res.token);
            Vue.prototype.uploadHeader = {
              Authorization: "Bearer " + res.token,
            };
            resolve();
          })
          .catch((error) => {
            reject(error);
          });
      })
    },
    // 鑾峰彇鐢ㄦ埛淇℃伅
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {

 src/views/login.vue

@@ -38,6 +38,7 @@
            <router-link class="link-type" :to="'/register'">绔嬪嵆娉ㄥ唽</router-link>
          </div>
        </el-form-item>
        <el-button v-if="false" type="primary" plain @click="goLogin">闆嗗洟闆嗘垚鐧诲綍</el-button>
      </el-form>
    </div>
    <!--  搴曢儴  -->
@@ -48,7 +49,7 @@
</template>

<script>
import { getCodeImg } from "@/api/login";
import { getCodeImg, getSsoAuthUrl } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'

@@ -58,8 +59,8 @@
    return {
      codeUrl: "",
      loginForm: {
        username: "admin",
        password: "admin123",
        username: "ZT-",
        password: "",
        rememberMe: false,
        code: "",
        uuid: ""
@@ -94,6 +95,13 @@
    this.getCookie();
  },
  methods: {
    async goLogin() {
      const {
        data: { data },
      } = await getSsoAuthUrl()
      window.location.href = data
      // this.$router.push({ path: '/thirdpartylogin' })
    },
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;

 src/views/logindemo.vue

对比新文件
@@ -0,0 +1,24 @@
<template>
  <div></div>
</template>
<script>
import { getSsoAuthUrl } from '@/api/login'
export default {
  data() {
    return {}
  },
  created() {
    this.goLogin()
  },
  computed: {},
  methods: {
    async goLogin() {
      const {
        data: { data }
      } = await getSsoAuthUrl()
      window.location.href = data
    }
  }
}
</script>
<style scoped></style>

 src/views/thirdpartylogin.vue

对比新文件
@@ -0,0 +1,29 @@
<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {
      SSO: window.location.hash
    }
  },
  created() {
    this.initLogin()
    console.log(this.SSO)
  },
  methods: {
    initLogin() {
      const code = this.SSO.split('&')[0].split('=')[1]
      console.log(code)

      if (code) {
        this.$store.dispatch('LoginBySSO', code).then(() => {
          this.$router.push({ path: '/' })
        })
      }
    }
  }
}
</script>
<style scoped></style>