vue通过获取url中的信息登录页面

这篇具有很好参考价值的文章主要介绍了vue通过获取url中的信息登录页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

 vue通过获取url中的信息登录页面,Vue初学,vue.js,javascript,前端

<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

 vue通过获取url中的信息登录页面,Vue初学,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-833117.html

  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中的信息登录页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 微信扫码登录及获取个人信息实现的三种方法

    一、流程: 微信提供的扫码方式有两种,分别是: 根据文档我们可以知道关于扫码授权的模式整体流程为: 二、前置条件: 微信开发官网 申请: appid: ‘’, // 后端提供 redirect_uri: ‘’, // 后端提供 AppSecret // 后端提供 三、具体登录实现 实现方式一: 使用vue插件: 使用: 结果

    2023年04月13日
    浏览(50)
  • Vue2 实战 基于 Elmenet-UI 的 单页面开发 用户信息增删改查 | 支持分页查询 | 自动登录

    为了熟悉 Vue2 框架 的使用,现采用 Vue2的基础知识、Router路由、Vuex 管理仓库来实现一个可对用户进行增删改查的小案例。数据存储在浏览器的 localStorage 本地缓存中,方便模拟从后端获取数据,不过这里仅有前端部分,没有涉及 axios 请求相关的内容。 技术栈:Vue2 + ElementU

    2024年02月08日
    浏览(37)
  • uniapp在小程序中获取manifest中的版本等配置信息vue2

    vue2版本在根目录新建一个 vue.config.js ,如果没有的话。 写入以下内容 执行的过程 读取 manifest.json 的源文件内容 去掉其中的注释后转为 JSON 数据 写入到 utils/config/version.json ,自己视情况修改路径 读取 import { version } from \\\"utils/config/version.json\\\" 如果有其他要共享的文件也可以这

    2024年02月05日
    浏览(45)
  • uniapp获取用户信息(登录及个人中心页面的实现)

    因为在微信小程序中wx.getuserInfo已经失效,所以我们在uniapp中也应该使用wx.getUserProfile来获取用户信息 页面的逻辑 一上来加载个人中心页,当用户点击未登录三个字时跳转登录页 登录页点击微信登录应该跳出授权弹窗获取用户的授权信息(使用wx.getUserProfile) 当用户点击同意

    2024年02月11日
    浏览(53)
  • 【Vue】url拼接参数获取解析

    前言: 前端在开发的时候有很多情况下需要提供不带参数的链接或者带参数的链接给自己使用或者给第三方系统,如果提供给第三方系统使用的话一般是第三方需要通过iframe/window.open/a标签打开链接进入对应的页面。 情况一:获取当前浏览器地址栏链接 1.location.href:获取当

    2023年04月09日
    浏览(44)
  • uniapp系列-超详细教你在uni-app+vue3里通过web-view组件传递信息打开H5页面写入localstorage并解决兼容性

    web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。 点击这里直达官网文档 点击这里下载我的代码demo 本文最下面还有一些 常见或者奇怪问题解决方案 哦~ 之前开发好的H5页面,不想重新开发,想要直接放进项目用

    2024年02月09日
    浏览(59)
  • uniapp(vue3) - 详解微信小程序平台用户授权登录全流程,uniapp v3版本中小程序端开发下用户点击登录后获取手机号/昵称/性别/头像等信息完成登录(提供完整示例代码,一键复制开箱即用)

    在uniapp(v3)微信小程序端开发中,超详细实现用户授权登录完整功能源码,用户授权后获取手机号/昵称/头像/性别等,提供完整思路流程及逻辑讲解。 你也可以直接复制粘贴,然后改下参数放到你的项目中去就行。 做功能之前,先

    2024年02月05日
    浏览(58)
  • VUE登录注册页面,完整vue,直接复制

    效果图: Login.vue Register.vue 由于显示的分辨率和比例不同,最终展示可能出现位置不对等问题,主要调节style中.container的height属性和.login-wrapper的transform:属性 App.vue也奉上:

    2024年02月11日
    浏览(45)
  • vue 中从后端获取到文件的 url 地址,前端根据 url 地址下载文件

    项目用的是 vben admin 框架,用的是 vue3 + TS 项目需求数据导出功能,前端需要实现文件下载功能 后端返回的是文件的 url 地址 (本项目中返回的是阿里云 oss 的文件地址) 从后端得到的是一个 url 地址,先通过 fetch api 请求这个 url 地址并转换成 blob 对象,通过 URL.createObjectUrl() 将 blo

    2024年02月06日
    浏览(49)
  • 实现Vue的登录页面

    实现Vue的登录页面步骤: 以下是一个简单的Vue登录页面的代码: App.vue Login.vue router/index.js 注意,以上只是一个简单示例代码,真实的项目需要根据具体情况进行相应的调整和修改。另外,为了安全起见,请勿在前端将明文密码传输到后端,应该使用加密方式传输。

    2024年02月15日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包