文章目录
一、外部应用
外部应用就是通过门户的方式链接到外部的应用的形式;没有直接写在门户中,而是通过跳转链接的方式访问;
流程:
1.添加wlogin和blank跳转文件
wlogin是用来通过门户跳转外部链接用的,如果登录token失效会重定向到门户登录页面
//wlogin.vue代码
<template>
<div></div>
</template>
<script setup>
function forward() {
location.href = '地址/sso/oauth/authorize?client_id=37837847384784&response_type=code&redirect_uri=地址/bbtj/blank&scope=all'
}
forward()
</script>
//blank代码
<template>
<div></div>
</template>
<script setup>
import {getTokenByCode} from "@/api/login";
import {getHtmlArg} from "@/utils/index";
import { setToken} from '@/utils/auth';
const router = useRouter();
function getTK() {
let param = {"code":getHtmlArg('code'),"systemName":"bbtj"}
getTokenByCode(param).then(res => {
setToken(res.data.access_token);
//跳转到当前应用的首页
router.push({path: '/home'})
})
}
getTK();
</script>
//getHtmlArg方法
// 获取地址栏参数
export function getHtmlArg(name) {
var match = window.location.href.match(new RegExp(name + '=([^&#]*)'));
return match ? decodeURIComponent(match[1]) : defaultValue;
}
2.ruoter中添加对应的路由,wlogin和blank
添加对应的路由,跳转到对应的页面
3.permission.js中添加wlogin和blank到白名单中
添加白名单,并修改重定向到wlogin登录页面;wlogin是门户登录页面。
4.添加对应的前缀
这个是跟后端约定的字段,后端根据这个字段去跳转不同的子系统
- router/index.js
- vite.config.js
5.修改打包接口前缀
这个前缀也是需要添加到生产环境的地址中的,应该是用来代理用的(不是很确定)
- .env.production
二、内部应用
内部应用就是通过把这个应用放在这个应用的内部,不是通过注册应用的方式实现登录,所以这个不涉及登录;我的理解就是组件直接写在门户中,不用通过链接跳转,可以直接通过获取token访问。
流程
1.添加blank实现跳转登录
<template>
<div></div>
</template>
<script setup>
//检验token是否为授权的token
import {checkToken} from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
const router = useRouter();
const store = useStore();
function getTK() {
const redirect = ref(undefined);
let token = getHtmlArg('token');
checkToken(token).then(res => {
console.log(JSON.stringify(res));
if(res.code === 200){
//因为通过门户直接跳转的话不会走登录接口,所以在这里需要调用下面几个方法
//1.首先需要保存一下当前的token;2.然后获取当前登录信心;3.获取当前路由信息;
setToken(token)
store.dispatch('GetInfo').then(() => {
store.dispatch("GenerateRoutes").then((accessRoutes) => {
let defultPath = accessRoutes[0].path + "/" + accessRoutes[0].children[0].path;
router.push({path: redirect.value || defultPath});
});
})
}else{
router.push({path:'/login'})
}
})
}
getTK();
</script>
2.添加router,添加路由
只有添加路由之后,才能实现路由跳转,实现对应页面的逻辑。
3.perssion.js中把blank加入白名单中
白名单是为了可以直接跳转到对应的页面,没有限制。
4.添加前缀
这个是跟后端约定的字段,后端根据这个字段去跳转不同的子系统
-
vite.config.js
-
router/index.js
5.添加打包文件的前缀
这个前缀也是需要添加到生产环境的地址中的,应该是用来代理用的(不是很确定)
- env.production