项目对接流程记录

一、外部应用

外部应用就是通过门户的方式链接到外部的应用的形式;没有直接写在门户中,而是通过跳转链接的方式访问;

流程:

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

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值