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", ["首页"]);
      }
    },
相关推荐
悠哉摸鱼大王3 分钟前
cesium学习(二)-地图地形
前端·cesium
青山师22 分钟前
【AI热点资讯】5月10日AI热点:Cloudflare裁员1100人、Musk庭审第二周回顾、OpenAI发布Codex Chrome插件
前端·人工智能·chrome·ai·ai热点
TA远方44 分钟前
【JavaScript】Promise对象使用方式研究和理解
javascript·编程·脚本·web·js·promise·委托
阿赛工作室1 小时前
AI时代WEB开发人员生存与发展报告
前端·人工智能·node.js
用户125758524361 小时前
写了三年定时任务还在手改 Cron 表达式?这个 GoFrame 后台框架帮你全闭环了
vue.js
ZC跨境爬虫1 小时前
跟着 MDN 学 HTML day_36:(深入理解 Comment 接口与 DOM 注释节点)
前端·javascript·ui·html·音视频·视频编解码
石小石Orz2 小时前
Harness Engineering 到底是什么?概念、实战与争议,一次全部讲清楚
前端·后端
悠哉摸鱼大王2 小时前
cesium学习(三)-3d tiles
前端·cesium
前端那点事2 小时前
Vue3自定义Hooks保姆级教程!从原理到企业级实战,告别混乱代码
前端·vue.js
前端那点事2 小时前
别再乱用Vue3响应式!ref、reactive、toRef、toRefs完整区别+企业级落地实战
前端·vue.js