文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue不同项目之间传递、接收参数问题

2023-05-17 08:10

关注

描述一下场景

UC(User-Center)是单独的一个项目,包括Spring Cloud + Vue, 服务项目是另一个项目,也是Spring Cloud+ Vue

这里主要针对是登录操作,我们为了完成SSO(Single Sign On)的效果,认证和授权在UC完成,用户发起资源请求,服务网关会进行过滤,判断请求头中是否有token以及token是否过期,不满足就会带着原访问资源项目的主页(这里记为uri)重定向到登录页面,此时就是登录的相关操作,进行完以后会生成一个token标识,这时候要根据带来的uri进行页面跳转,此时要带上token标识过去。

关于token的携带,以下是几种方式的分析: 

1.LocalStroage方式 (不可取)

如果可以用localStorage来存储token,这样就不用来回带着token信息,直接在服务项目的vue请求拦截器中把token放到headers里边就可以了? 事实是不可取的,因为localStorage 只在有相同的协议、相同的主机名、相同的端口下,才能读取/修改到同一份localStorage数据。 这里我们是两个vue项目,所以无法共享token,其次,假如这种方式可以,难道我们访问百度还能用访问腾讯时候存的localStorage里边的标识?所以,PASS.

localStorage深入了解:localstorage 必知必会 

2.Cookie方式 (不推荐)

使用Cookie进行共享,也就是说在UC的vue项目中,登录成功,将token存入cookie中,在服务项目的vue请求拦截器中获取cookie先存入localStorage中,然后放入headers,这样之后每次从localStorage中拿出token放入headers即可。实现上是可以的因为cookie在两个vue项目之间是共享的。但是,不好的点是,其一是如果cookie被禁用了怎么办?,尽管可以处理但是还是说明这个方法存在一些明显的不足,其次存cookie是很老套的方式,市面上也很少用到。关于多个cookie参数,如果获取某一个cookie值的方法封装:

 window.getCookie = function(name) {
       var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
       if (match) return match[2];
 }

 存:

 document.cookie = "token=1234";

取:

let token = getCookie('token');

3.参数形式 (时效性)

直接以参数形式传递,在另一方获取请求参数,再放入localStorage中。看起来这种方式似乎是最直接的,其实来说它也保证了token的时效性,但是写的时候可真给我恶心坏了,不说了只能怪咱百度不会用,其实以参数传递的方式还有很多种,可以多使用几种,这里暂且总结一种,后序填坑。

传: 拼到url中

 取:一定是在页面获取,无法在请求拦截器取出

到此这篇关于Vue不同项目之间传递、接收参数问题的文章就介绍到这了,更多相关vue跨项目传参内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯