草庐IT

【Vue】跳转外部链接并携带参数并触发

zero_or_hero_ 2023-12-26 原文

需求：

        当平台运行多个系统时（"系统一"，"系统二" 都是不同时间段开发的）

        可以从"系统一"点击按钮跳转到"系统二"，并且完成 "系统二" 登录操作，直接显示"系统二"的主页，可以视为两套系统使用相同的用户名密码

方案一

通过 window.location.href 修改url 进行跳转

带参数传值方法：

        点击跳转按钮的函数内 url + 参数

let url = 'http://192.168.200.126:8080/login?account=' + param.account + "&password=" + param.password
window.location.href = url;

带参数接受方法：

        登录页面，在Vue 的 created 生命周期钩子函数 调用方法，先得到url ,单纯的字符串处理，将得到的参数填入form表单中，触发提交，再将地址栏显示的用户名密码的明码覆盖掉,就可以直接跳转到 主页了

    getRequest() {
      let url = location.search; //获取url中"?"符后的字串 
      if(url){
        url = url.substring(1)
        let urlList = url.split('&')
        let account = urlList[0].split('=')[1]
        let password = urlList[1].split('=')[1]
        console.log({'account':account,'password':password})
        this.form.account = account
        this.form.password = password
        this.submit()
        location.href = 'http://192.168.200.126:8080/#/home'
      }
    },

或者 参数存在 sessionStorage 里 

      url = 'http://localhost:8080/login?account=' + param.account// + "&password=" + param.password
      window.location.href = url; 
  getRequest() {
      let url = location.search; //获取url中"?"符后的字串 
      let param = sessionStorage.length ? JSON.parse(sessionStorage.userInfo):sessionStorage
      if(url){
        // url = url.substring(1)
        // let urlList = url.split('&')
        // let account = urlList[0].split('=')[1]
        // let password = urlList[1].split('=')[1]
        // console.log({'account':account,'password':password})
        this.form.account = param.account
        this.form.password = param.password
        this.submit()
        location.href = 'http://localhost:8080/#/home'
      }
      console.log(param)
    },

然后将系统二的 用户管理接口CURD接口放到白名单，通过Vue 的 跨域调用系统二后台同步用户数据 （或者 通过数据库作业计划执行存储过程进行用户账号增改的同步）

仍然能看到登陆画面

这里的密码给保存明码在 session 中，或者在数据库中保存明码，这里只存一个表id，到 “系统二”查一下这个明码的用户名密码再登陆，这个明码表的CURD 操作接口 同样是开放白名单或者数据库同步

方案二

通过Vue 的 跨域实现

首先，明确，什么是跨域？

        协议 域名/IP 端口 这三个只要有一个不同，就会出现跨域。

从别的地方拷过来的例子：

#协议跨域
http://a.baidu.com 访问 https://a.baidu.com；
#端口跨域
http://a.baidu.com:8080 访问  http://a.baidu.com:80；
#域名跨域
http://a.baidu.com  访问  http://b.baidu.com；

再联想到 Vue 的 “vue-axios 前后端分离 跨域访问的实现”：

(55条消息) Vue项目生成+跳转页面+跨域_圆滚滚大西瓜的博客-CSDN博客_vue跨域跳转

还要考虑两个后台 的 token 

(55条消息) 两个跨域页面进行跳转传参的方案_bigHead-的博客-CSDN博客_跨域跳转页面

好，开始尝试

未完待续

需求变更，不用试了，就这样吧

 ​​​​​​​

 

Vue并xffxff0cpasswordjavascript前端开发语言

有关【Vue】跳转外部链接并携带参数并触发的更多相关文章

  1. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  2. ruby - RSpec - 使用测试替身作为 block 参数 - 2

    我有一些Ruby代码，如下所示:Something.createdo|x|x.foo=barend我想编写一个测试，它使用double代替block参数x，这样我就可以调用:x_double.should_receive(:foo).with("whatever").这可能吗？ 最佳答案 specify'something'dox=doublex.should_receive(:foo=).with("whatever")Something.should_receive(:create).and_yield(x)#callthere

  3. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  4. ruby - 检查方法参数的类型 - 2

    我不确定传递给方法的对象的类型是否正确。我可能会将一个字符串传递给一个只能处理整数的函数。某种运行时保证怎么样？我看不到比以下更好的选择:defsomeFixNumMangler(input)raise"wrongtype:integerrequired"unlessinput.class==FixNumother_stuffend有更好的选择吗？ 最佳答案 使用Kernel#Integer在使用之前转换输入的方法。当无法以任何合理的方式将输入转换为整数时，它将引发ArgumentError。defmy_method(number)

  5. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  6. ruby-on-rails - 在默认方法参数中使用 .reverse_merge 或 .merge - 2

    两者都可以defsetup(options={})options.reverse_merge:size=>25,:velocity=>10end和defsetup(options={}){:size=>25,:velocity=>10}.merge(options)end在方法的参数中分配默认值。问题是:哪个更好？您更愿意使用哪一个？在性能、代码可读性或其他方面有什么不同吗？编辑:我无意中添加了bang(!)...并不是要询问nobang方法与bang方法之间的区别 最佳答案 我倾向于使用reverse_merge方法:option

  7. ruby-on-rails - Rails - 乐观锁定总是触发 StaleObjectError 异常 - 2

    我正在学习Rails，并阅读了关于乐观锁的内容。我已将类型为integer的lock_version列添加到我的articles表中。但现在每当我第一次尝试更新记录时，我都会收到StaleObjectError异常。这是我的迁移:classAddLockVersionToArticle当我尝试通过Rails控制台更新文章时:article=Article.first=>#我这样做:article.title="newtitle"article.save我明白了:(0.3ms)begintransaction(0.3ms)UPDATE"articles"SET"title"='dwdwd

  8. ruby - 定义方法参数的条件 - 2

    我有一个只接受一个参数的方法:defmy_method(number)end如果使用number调用方法，我该如何引发错误？？通常，我如何定义方法参数的条件？比如我想在调用的时候报错:my_method(1) 最佳答案 您可以添加guard在函数的开头，如果参数无效则引发异常。例如:defmy_method(number)failArgumentError,"Inputshouldbegreaterthanorequalto2"ifnumbereputse.messageend#=>Inputshouldbegreaterthano

  9. ruby-on-rails - 如何在 Rails Controller Action 上触发 Facebook 像素 - 2

    我有一个ruby​​onrails应用程序。我按照facebook的说明添加了一个像素。但是，要跟踪转化，Facebook要求您将页面置于达到预期结果时出现的转化中。即，如果我想显示客户已注册，我会将您注册后转到的页面作为成功对象进行跟踪。我的问题是，当客户注册时，在我的应用程序中没有登陆页面。该应用程序将用户带回主页。它在主页上显示了一条消息，所以我想看看是否有一种方法可以跟踪来自Controller操作而不是实际页面的转化。我需要计数的Action没有页面，它们是ControllerAction。是否有任何人都知道的关于如何执行此操作的gem、文档或最佳实践？这是进入布局文件的像素

  10. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

随机推荐