前端实现单点登录

news/2025/2/12 23:38:27/

 简单概括就是,一个系统登录,跳转多个系统,其他系统不需要再登录,直接进入页面

 

登录的系统 

<template><div><div class="content"><div class="item" v-for="(item,index) in list" :key="index" @click="topath(item.url)">{{item.title}}</div></div></div>
</template><script>
export default {data () {return {list: [{title: '登录一',url: 'http://www.baidu.com/#/page/followUp'  // 跳转他的首页},{title: '登录一',url: 'http://www.baidu.com/#/page/followUp'  // 跳转他的首页},{title: '登录一',url: 'http://www.baidu.com/#/page/followUp'  // 跳转他的首页},{title: '登录一',url: 'http://www.baidu.com/#/welcome'  // 跳转他的首页}]}},methods: {topath (url) {// 拿到toekn,传给跳转的网址const Authorization = localStorage.getItem('Authorization')window.open(`${url}?Authorization=${Authorization}`, '_blank')}}
}
</script><style lang="less" scoped>
.content {display: flex;flex-wrap: wrap;justify-content: space-between;padding: 20px;.item {width: 345px;height: 140px;padding: 0 20px;background: #fff;margin: 0 24px 24px 0;display: flex;align-items: center;justify-content: center;border-radius: 6px;cursor: pointer;}
}
</style>

其他系统

// 在路由这里进行处理,获取Authorization,进行判断,存在,则直接进入
// 路由全局守卫
router.beforeEach((to, from, next) => {if (to.query.Authorization) {localStorage.setItem('Authorization', to.query.Authorization)}if (to.path === '/') {localStorage.clear()next()} else {if (localStorage.getItem('Authorization')) {next()} else {router.push('/')next()}}})
export default router

 

 


http://www.ppmy.cn/news/1375474.html

相关文章

1.2_2 OSI参考模型

文章目录 1.2_2 OSI参考模型一、概述&#xff08;一&#xff09;ISO/OSI参考模型是怎么来的&#xff1f;&#xff08;二&#xff09;ISO/OSI参考模型&#xff08;三&#xff09;ISO/OSI参考模型解释通信过程 二、各层功能及协议&#xff08;一&#xff09;应用层&#xff08;第…

从根到叶:深入理解二叉搜索树

我们的心永远向前憧憬 尽管活在阴沉的现在 一切都是暂时的,转瞬即逝, 而那逝去的将变为可爱 &#x1f31d;(俄) 普希金 <假如生活欺骗了你> 1.二叉搜索树的概念 概念:搜索树&#xff08;Search Tree&#xff09;是一种有序的数据结构&#xff0c;用于存储和组…

第11周,第三期技术动态

大家好&#xff0c;才是真的好。 真没想到&#xff0c;本周是今年第十一周&#xff0c;2024年还有不到三百天就结束了。 今天周五&#xff0c;我们继续介绍与Domino相关产品新闻&#xff0c;以及互联网或其他IT行业动态等。 一、在Windows 10和Windows 11上运行Domino和Trav…

刚发现的5款实用性拉满的软件

​ 每次分享实用的软件,都会给人一种踏实和喜悦的感觉,这也是我热衷于搜集和推荐高效工具软件的原因。 1.文件压缩工具——7-Zip ​ 7-Zip是一款开源的文件压缩工具&#xff0c;以其高压缩比率和强大的AES-256加密功能而闻名。支持7z、ZIP、GZIP、BZIP2和TAR等多种格式的打包…

项目建设计划书-word

【项目建设计划书-word】 项目描述&#xff08;项目目标&#xff0c;客户需求情况&#xff0c;项目交付清单&#xff0c;验收标准和交付期限&#xff0c;服务及约束&#xff09;项目组织&#xff08;项目组人员架构&#xff0c;职责分工&#xff0c;人员投入安排及时间点安排&…

UnityAPI的学习——Random类

Random类是Unity中用于产生随机数的类&#xff0c;不可实例化&#xff0c;只有静态属性和静态方法 Random类静态属性 在Random类中&#xff0c;涉及的静态属性有insideUnitCircle属性、insideUnitSphere属性、onUnitSphere属性、rotationUnitform属性、rotation属性和seed属性…

【机器学习】决策树系统 | 决策树基本原理,最优划分属性,剪枝处理

文章目录 1 基本原理2 最优划分属性选择2.1 信息增益选择最优属性方法2.2 信息增益率选择最优属性方法——C4.5决策树2.3 基尼指数选择最优属性——CART决策树 3 剪枝处理3.1 预剪枝3.2 后剪枝 决策树是一种常用的机器学习算法&#xff0c;它模拟了人类决策过程中的思考方式。想…

设计模式学习笔记 - 设计原则 - 10.实战:针对非业务的通用框架开发,如何做需求分析和设计及如何实现一个支持各种统计规则的性能计数器

前言 接下来我们在结合一个支持各种统计规则的性能计数项目&#xff0c;学习针对一个非业务的通用框架开发&#xff0c;如何来做需求分析、设计和实现&#xff0c;同时学习如何灵活应用各种设计原则。 项目背景 设计开发一个小的框架&#xff0c;能够获取接口调用的各种统计信…