vue通过获取url中的信息登录页面的代码详解

 更新时间:2024年02月20日 09:41:16   作者:Mr.ZYG  
这篇文章主要给大家介绍了vue通过获取url中的信息登录页面的方法,文中通过代码示例给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下

在主界面获取到url的信息  html

<script>
 
  let getRequest = function () {
    var url = location.href
    // 从 URL 中提取查询参数部分
    const queryParamsString = url.split('?')[1];
    // 使用 URLSearchParams 解析查询参数
    const queryParams = new URLSearchParams(queryParamsString);
    // 获取特定参数的值
    const userName = queryParams.get('userName');
    const loginMode = queryParams.get('loginMode');
    localStorage.setItem("userName",userName)
    localStorage.setItem("loginMode",loginMode)
  }
 
  getRequest()
</script>

将存储到localStorage中的信息发生请求   vue

  created() {
    this.loginInfo.userAcct = localStorage.getItem("userName") || "";
    this.loginInfo.loginMode = localStorage.getItem("loginMode") || "";
    if (this.loginInfo.userAcct !== "" && this.loginInfo.loginMode !== "") {
          // 直接在localstroage获取的信息 调用登录接口
        $login(this.loginInfo)
        .then((res) => {
          this.handleLoginInfo(res);
        })
        .catch((err) => {
          console.log(err);
        });
    }
    // this.getCode();
    // this.getSecretKey();
    // this.getRemInfo();
    this.enterEvent(); // 回车键登录
  },
    handleLoginInfo(res) {
      if (res.code === 200) {
        this.$message.success("登录成功!");
        //储存token,账号,密码
        this.$store.commit("set_token", res.data.token);
        this.$store.commit("set_userAcct", this.loginInfo.userAcct);
        this.$store.commit("set_password", this.loginInfo.password);
        this.$store.commit("set_tenantCode", this.loginInfo.tenantCode);
        this.$store.commit("set_userInfo", res.data.userInfo);
        let params = {
          userId: res.data.userInfo.sysUser.userId,
        };
        params = this.$qs.stringify(params);
        this.getMenuTreeSelect(res.data.userInfo.sysUser.userId);
        this.getDeptTreeSelect();
        //若用户选择记住密码
        if (this.isRemPwd) {
          this.$Cookie.set("userAcct", this.loginInfo.userAcct, {
            expires: 30,
          });
          this.$Cookie.set("tenantCode", this.loginInfo.tenantCode, {
            expires: 30,
          });
          //将密钥一起加密储存,后续解密时要用到
          this.$Cookie.set(
            "sk",
            CryptoJS.AES.encrypt(this.secretKey, "de43a68e4d184aa3"),
            {
              expires: 30, // 存储30天
            }
          );
          this.$Cookie.set(
            "thinglinkpwd",
            CryptoJS.AES.encrypt(this.loginInfo.password, this.secretKey),
            {
              expires: 30, // 存储30天
            }
          );
          // this.$router.go(0)
        } else {
          // 删除cookie
          this.$Cookie.remove("userAcct");
          this.$Cookie.remove("thinglinkpwd");
          this.$Cookie.remove("sk");
          this.$Cookie.remove("tenantCode");
        }
        // 去往首页
        this.$router.push("/index");
        //修改下首页默认的路径和菜单名称,确保一下侧边栏以及面包屑的正常展示,换首页了记得改下
        this.$store.commit("set_activeIndex", "/index");
        this.$store.commit("set_menuName", ["首页"]);
      }
    },

到此这篇关于vue通过获取url中的信息登录页面的代码详解的文章就介绍到这了,更多相关vue通过url获取信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue动态禁用控件绑定disable的例子

    vue动态禁用控件绑定disable的例子

    今天小编就为大家分享一篇vue动态禁用控件绑定disable的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue项目中Websocket的使用实例

    Vue项目中Websocket的使用实例

    WebSocket就诞生了,它最大特点就是服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,下面这篇文章主要给大家介绍了关于Vue项目中Websocket使用的相关资料,需要的朋友可以参考下
    2023-02-02
  • Vue中如何获取json文件中的数据

    Vue中如何获取json文件中的数据

    访问百度音乐API需要传递音乐类型参数,而这些参数是存在musictype.json中,现在在组件listcate.vue需要获取json数据,如何实现呢,下面小编给大家带来了Vue中如何获取json文件中的数据,感兴趣的朋友一起看看吧
    2022-09-09
  • Vuex给state中的对象新添加属性遇到的问题及解决

    Vuex给state中的对象新添加属性遇到的问题及解决

    这篇文章主要介绍了Vuex给state中的对象新添加属性遇到的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue中forEach循环的使用讲解

    vue中forEach循环的使用讲解

    这篇文章主要介绍了vue中forEach循环的使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue CLI 命令行打包配置自定义参数方式

    Vue CLI 命令行打包配置自定义参数方式

    这篇文章主要介绍了Vue CLI 命令行打包配置自定义参数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue实现附件上传功能

    Vue实现附件上传功能

    这篇文章主要为大家详细介绍了Vue实现附件上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 对vue生命周期的深入理解

    对vue生命周期的深入理解

    这篇文章主要给大家介绍了关于对vue生命周期的深入理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • Vue如何使用ElementUI对表单元素进行自定义校验及踩坑

    Vue如何使用ElementUI对表单元素进行自定义校验及踩坑

    有一些验证不是通过input select这样的受控组件来触发验证条件的 ,可以通过自定义验证的方法来触发,下面这篇文章主要给大家介绍了关于Vue如何使用ElementUI对表单元素进行自定义校验及踩坑的相关资料,需要的朋友可以参考下
    2023-02-02
  • Vue动态组件与异步组件超详细讲解

    Vue动态组件与异步组件超详细讲解

    这篇文章主要介绍了Vue动态组件与异步组件,动态组件是根据数据的变化,可以随时切换不同的组件,比如咱们现在要展示一个文本框和输入框,我们想要根据我们data中定义的值去决定是显示文本框还是输入框
    2023-03-03

最新评论