新增SSO前后端分离集成示例 vue3 版本

sa-token-demo/sa-token-demo-sso-client-vue3/src/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <router-view />
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+
+</style>

sa-token-demo/sa-token-demo-sso-client-vue3/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

sa-token-demo/sa-token-demo-sso-client-vue3/src/main.js

@@ -0,0 +1,15 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+// createApp
+const app = createApp(App);
+
+// 安装 vue-router
+import router from './router';
+app.use(router);
+
+
+
+// 绑定dom
+app.mount('#app');

sa-token-demo/sa-token-demo-sso-client-vue3/src/router/index.js

@@ -0,0 +1,31 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+
+/**
+ * 创建 vue-router 实例
+ */
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes: [
+        // 首页
+        {
+            name: 'index',
+            path: "/index",
+            component: () => import('../views/sso-index.vue'),
+        },
+        // SSO-登录页
+        {
+            name: 'sso-login',
+            path: '/sso-login',
+            component: () => import('../views/sso-login.vue'),
+        },
+
+        // 访问 / 时自动重定向到 /index
+        {
+            path: "/",
+            redirect: '/index'
+        }
+    ],
+});
+
+// 导出
+export default router;

sa-token-demo/sa-token-demo-sso-client-vue3/src/style.css

@@ -0,0 +1,8 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  padding: 1em;
+}

sa-token-demo/sa-token-demo-sso-client-vue3/src/views/method-util.js

@@ -0,0 +1,36 @@
+import axios from 'axios'
+
+// sso-client 的后端服务地址
+export const baseUrl = "http://sa-sso-client1.com:9001";
+
+// 封装一下 Ajax 方法
+export const ajax = function(path, data, successFn) {
+    axios({
+        url: baseUrl + path,
+        method: 'post',
+        data: data,
+        headers: {
+            "Content-Type": "application/x-www-form-urlencoded",
+            "satoken": localStorage.getItem("satoken")
+        }
+    }).
+    then(function (response) { // 成功时执行
+        const res = response.data;
+        successFn(res);
+    }).
+    catch(function (error) {
+        return alert("异常：" + JSON.stringify(error));
+    })
+}
+
+// 从url中查询到指定名称的参数值
+export const getParam = function(name, defaultValue){
+    var query = window.location.search.substring(1);
+    var vars = query.split("&");
+    for (var i=0;i<vars.length;i++) {
+        var pair = vars[i].split("=");
+        if(pair[0] == name){return pair[1];}
+    }
+    return(defaultValue == undefined ? null : defaultValue);
+}
+

sa-token-demo/sa-token-demo-sso-client-vue3/src/views/sso-index.vue

@@ -0,0 +1,29 @@
+<!-- 项目首页 -->
+<template>
+  <h2> Sa-Token SSO-Client 应用端（前后端分离版-Vue3） </h2>
+  <p>当前是否登录：<b>{{isLogin}}</b></p>
+  <p>
+    <router-link :to="loginUrl">登录</router-link>&nbsp;&nbsp;
+    <a :href="logoutUrl">注销</a>
+  </p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import {baseUrl, ajax} from './method-util.js'
+
+// 单点登录地址
+const loginUrl =  '/sso-login?back=' + encodeURIComponent(location.href);
+// 单点注销地址
+const logoutUrl = baseUrl + '/sso/logout?satoken=' + localStorage.satoken + '&back=' + encodeURIComponent(location.href);
+
+// 是否登录
+const isLogin = ref(false);
+
+// 查询当前会话是否登录
+ajax('/sso/isLogin', {}, function (res) {
+  console.log('/isLogin 返回数据：', res);
+  isLogin.value = res.data;
+})
+
+</script>

sa-token-demo/sa-token-demo-sso-client-vue3/src/views/sso-login.vue

@@ -0,0 +1,52 @@
+<!-- Sa-Token-SSO-Client端-登录页 -->
+<template>
+
+</template>
+
+<script setup>
+import {onMounted} from "vue";
+import {ajax, getParam} from './method-util.js';
+import router from '../router';
+
+// 获取参数
+const back = getParam('back') || router.currentRoute.value.query.back;
+const ticket = getParam('ticket') || router.currentRoute.value.query.ticket;
+
+console.log('获取 back 参数：', back)
+console.log('获取 ticket 参数：', ticket)
+
+// 页面加载后触发
+onMounted(() => {
+  if(ticket) {
+    doLoginByTicket(ticket);
+  } else {
+    goSsoAuthUrl();
+  }
+})
+
+// 重定向至认证中心
+function goSsoAuthUrl() {
+  ajax('/sso/getSsoAuthUrl', {clientLoginUrl: location.href}, function(res) {
+    console.log('/sso/getSsoAuthUrl 返回数据', res);
+    location.href = res.data;
+  })
+}
+
+// 根据ticket值登录
+function doLoginByTicket(ticket) {
+  ajax('/sso/doLoginByTicket', {ticket: ticket}, function(res) {
+    console.log('/sso/doLoginByTicket 返回数据', res);
+    if(res.code === 200) {
+      localStorage.setItem('satoken', res.data);
+      location.href = decodeURIComponent(back);
+    } else {
+      alert(res.msg);
+    }
+  })
+}
+
+</script>
+
+<style scoped>
+
+</style>