vue3笔记（14）casdoor接入

遇到一个新需求，使用casdoor的登录入口，需要在我的项目中修改登录逻辑，这篇记录试用过程。

调用逻辑

我的设计思路是当前系统处于未登录状态（即获取不到token）时，跳转login页面；
当前系统处于已登录状态时，跳转redirect页面（默认为主页home）。
操作步骤如下：

1. 在login页面触发casdoor中的getSigninUrl方法，跳转casdoor登录；
2. 输入用户名密码，跳转已配置好的/callback，本项目中为/home。跳转时URL中携带有code；
3. 在home主页中请求后端验证接口，参数为URL中取到的code；
4. 后端验证接口返回res中携带token（JWT），home中使用cookie储存token；
5. permission.ts中使用路由守卫验证token

casdoor-vue用法

npm i casdoor-vue-sdk

在main.ts中引入：

import Casdoor from "casdoor-vue-sdk";
const config = {
  serverUrl: "http://***",
  clientId: "***",
  organizationName: "teco",
  appName: "tecoai",
  redirectPath: "/home",
};
const app = createApp(App);
app.use(Casdoor, config);

在login.vue中使用：

<script setup>
import { onMounted, getCurrentInstance } from "vue";
import { useCasdoor } from "casdoor-vue-sdk";

const { getSigninUrl, getSignupUrl } = useCasdoor();
onMounted(() => {
  window.location.href = getSigninUrl();
});
</script>

自己实现一个应用管理系统

操作步骤

1. 首页地址：http://10.10.30.2:8003/
2. 登录首页：http://10.10.30.2:8003/login
   登录组织：http://10.10.30.2:8003/login/teco

需求描述

UMS系统负责所有用户的登录，登录进系统后，可以选择应用进行访问，采用单点登录。用token进行用户认证。
假设有应用A、B、C，成功登录访问应用A之后，在浏览器中输入应用B的UR，原理上应该是可以直接访问的。
问题：应用B的token从哪里获取？
代码执行顺序：permisson-axios/service，也就是先进行路由守卫，若无token，直接跳转应用的login。
现在需要实现：

1. 若无token，处于UMS未登录状态，跳转UMS的login
2. 若无token，处于UMS已登录状态，赋予token
   解决方案：
3. 在permisson路由守卫中，判断无token，getAccount()请求新token，通过res判断处理上述实现
4. 使用微前端架构，实现应用间通信，共享token信息

前端设计

1. UMS-登录页：请求login接口
2. UMS-首页：展示各个子系统入口，点击后登录子系统（使用静默登录方式-已登录app1，在同一浏览器输入app2的地址，这两个app属于同一组织，app2可以自动登录）
3. UMS-个人中心：可以修改用户密码、邮箱、手机号，和casdoor相关联
4. 子系统：初始化时请求用户个人信息及系统菜单，动态渲染菜单；菜单中包含按钮权限，需要获取后在页面渲染中处理

附录
casdoor-vue-sdk文档