前端实现单点登录

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

 

登录的系统 

<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

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/441330.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【wine】winetricks部署一个windows xp 应用程序的基础运行环境

AI 的资料 我想基于wintricks的“安装windows dll 或组件”功能&#xff0c;安装一个基础的windows xp运行环境&#xff0c;应当安装那些项目&#xff1f; 为了基于winetricks创建一个基础的Windows XP运行环境&#xff0c;您应该考虑安装以下项目以提高兼容性&#xff1a; 核…

四 笔记本centos7.9 隧道代理

上一章 内网穿透已经可以用公网连接服务器了三 笔记本 centos7.9 内网穿透-CSDN博客 现在数据库不暴露公网的情况下怎么连接mysql 1 mysql 已经安装完毕了,这里不在介绍安装步骤 2 连接公网ip服务器或者内网ip服务器 3 配置隧道监听端口 4:测试连接

CMake笔记

CMake笔记 文章目录 CMake笔记1 工程项目一般形式2 常见命令2.1 project2.2 set2.3 message2.4 add_executable()2.5 语法原则2.6 add_subdirectory2.7 add_library2.8 list 3 安装3.1 安装.h文件/文本文件3.2 安装工程脚本3.3 安装目录/目录下内容3.4 安装库文件3.5安装过程 4…

20.网络游戏逆向分析与漏洞攻防-网络通信数据包分析工具-数据分析工具数据类型编辑功能的实现

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易道云信息技术研究院VIP课 上一个内容&#xff1a;19.数据分析工具数据类型配置功能的实现 码云地址&#xff08;master 分支&#…

LCR 179. 查找总价格为目标值的两个商品 - 力扣

1. 题目 购物车内的商品价格按照升序记录于数组 price。请在购物车中找到两个商品的价格总和刚好是 target。若存在多种情况&#xff0c;返回任一结果即可。 2. 示例 3. 分析 我们首先想到暴力解法&#xff0c;这道题目的暴力还是比较简单的&#xff0c;列举每个数的情况即可…

Open CASCADE学习|表面着色显示模型

模型表面着色具有如下作用&#xff1a; 视觉增强&#xff1a;通过为模型表面添加着色&#xff0c;可以使其更加生动和逼真&#xff0c;提高视觉体验。 信息区分&#xff1a;在复杂的模型中&#xff0c;不同的部分或组件可能需要通过不同的颜色来区分&#xff0c;以便更清晰地…

干货!Python函数中的参数类型

1.必须参数 调用函数的时候&#xff0c;必须以正常的顺序传参&#xff0c;实参的数量和形参的数量保持一致 def demo(name, age):print("我的姓名是&#xff1a;%s, 年龄是&#xff1a;%d"%(name, age))demo("张三", 22) # 我的姓名是&#xff1a;张三…

通过测试自动化转移安全关键软件测试

我们正面临安全关键软件的成本危机&#xff0c;这意味着所需增加的功能已经超出了支付其开发费用的能力。例如&#xff0c;波音 787 项目需要 650 万行代码&#xff0c;设计、开发和测试成本达 40 亿美元。波音777X项目的成本数字并未公开披露&#xff0c;波音737 MAX最初估计为…

Python单线程、多线程、多进程

并发和并行 并发&#xff1a;单核CPU在不同时刻只执行一个任务&#xff0c;在同一时间段内&#xff0c;交替执行两个任务。 并行&#xff1a;双核CPU可以在同一时刻执行两个任务。 多核CPU的每个核心都可以独立执行一个任务&#xff0c;而且多个核心之间不会相互干扰。 并发…

typescript学习(更新中)

目录 开发环境搭建类型如何声明有哪些类型编译配置文件 开发环境搭建 npm i -g typescripttsc检查是否安装成功 类型如何声明 // 先声明再赋值 let a: number a 1// 直接赋值 let b 1function sum(a: number, b: number): number {return a b } console.log(sum(1, 2))有…

linux 将 api_key设置环境变量里

vi ~/.bashrc在最后添加api_key的环境变量 export GEMINI_API_KEYAIza**********WvpX7FwbdM刷新配置 source ~/.bashrc使用python 读取环境变量 import os gemini_api_key os.getenv(GEMINI_API_KEY) print(gemini_api_key)

Mysql的Cardinality值

什么是Cardinality值&#xff1f; Cardinality值是Mysql做索引优化时一个非常关键的值&#xff0c;优化器会根据这个值来判断是否使用这个索引&#xff0c;它表示索引中唯一值的数目估计值&#xff0c;该值应该尽可能接近1&#xff0c;如果非常小&#xff0c;则用户需要考虑是否…

企业计算机服务器中了mkp勒索病毒如何解密,mkp勒索病毒解密流程

网络技术的应用与发展&#xff0c;为企业的生产运营提高了效率&#xff0c;越来越多的企业利用网络开展多项工作业务&#xff0c;利用网络的优势&#xff0c;可以为企业更好的服务&#xff0c;但是稍不注意就会被网络威胁所盯上。近日&#xff0c;云天数据恢复中心接到多家企业…

二本双非|逆袭985/211只要做好这3件事

我的本科学校就是双非&#xff0c;但是我并不觉得考研是一件非常容易地事情&#xff0c;并且我身边的同学也没有一个觉得考研很轻松。可能网上很多经验贴说自己双非上岸985&#xff0c;二本上岸985&#xff0c;我觉得这是大家陷入了互联网时代的信息茧房。 考研不管是对985/211…

波奇学Linux: 信号捕捉

sigaction:修改信号对应的handler方法 act输入型参数&#xff0c;oldact输出型参数 void (*sa_handler) (int) //修改的自定义函数 sigset_t sa_mask // void handler(int signo) {cout<<"catch a signal, signal number: "<<signo<<endl; } int …

超市小程序有哪些功能 怎么制作

超市小程序是非常有用的工具&#xff0c;可以帮助超市提升用户体验&#xff0c;提高销售额。下面我们来看一下超市小程序可以具备哪些功能&#xff0c;以及如何制作一个高效的超市小程序。 1. **商品展示与搜索功能**&#xff1a;用户可以浏览超市的商品信息&#xff0c;包括价…

数字化转型导师坚鹏:大模型的应用实践(金融)

大模型的应用实践 ——开启人类AI新纪元 打造数字化转型新利器 课程背景&#xff1a; 很多企业和员工存在以下问题&#xff1a; 不清楚大模型对我们有什么影响&#xff1f; 不知道大模型的发展现状及作用&#xff1f; 不知道大模型的针对性应用案例&#xff1f; 课程…

雍禾医疗耀眼的“小”医生,雍禾植发刘树伟10年热爱一份事业

“你说你一个普外科大大夫&#xff0c;怎么改去做小小毛发医生了呢&#xff1f;”这是雍禾植发刘树伟医生&#xff0c;从公立医院转行做毛发医生时&#xff0c;被人质疑最多的点。然而&#xff0c;选择成为一名毛发医生&#xff0c;却是他花3年时间做出的重要的决定。 2009年&…

【C++ STL详解】——string类

目录 前言 一、string类对象的常见构造 二、string类对象的访问及遍历 1.下标【】&#xff08;底层operator【】函数&#xff09; ​编辑 2.迭代器 3.范围for 4.at 5.back和front 三、string类对象的容量操作 1.size 和 length 2.capacity 3.empty 4.clear 5.res…

【校园安全】支小蜜防校园霸凌语音识别系统的好处

在校园安全领域&#xff0c;防校园霸凌语音识别系统的出现&#xff0c;为预防和应对校园霸凌行为提供了新的技术手段。本文将探讨防校园霸凌语音识别系统的好处&#xff0c;并分析其在校园安全建设中的重要作用。 通过安装在校园各个角落的语音识别设备&#xff0c;系统能够捕…