vue通過獲取url中的信息登錄頁面的代碼詳解
更新時間:2024年02月20日 09:41:16 作者:Mr.ZYG
這篇文章主要給大家介紹了vue通過獲取url中的信息登錄頁面的方法,文中通過代碼示例給大家介紹的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下
在主界面獲取到url的信息 html
<script> let getRequest = function () { var url = location.href // 從 URL 中提取查詢參數(shù)部分 const queryParamsString = url.split('?')[1]; // 使用 URLSearchParams 解析查詢參數(shù) const queryParams = new URLSearchParams(queryParamsString); // 獲取特定參數(shù)的值 const userName = queryParams.get('userName'); const loginMode = queryParams.get('loginMode'); localStorage.setItem("userName",userName) localStorage.setItem("loginMode",loginMode) } getRequest() </script>
將存儲到localStorage中的信息發(fā)生請求 vue
created() { this.loginInfo.userAcct = localStorage.getItem("userName") || ""; this.loginInfo.loginMode = localStorage.getItem("loginMode") || ""; if (this.loginInfo.userAcct !== "" && this.loginInfo.loginMode !== "") { // 直接在localstroage獲取的信息 調(diào)用登錄接口 $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, }); //將密鑰一起加密儲存,后續(xù)解密時要用到 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"); //修改下首頁默認(rèn)的路徑和菜單名稱,確保一下側(cè)邊欄以及面包屑的正常展示,換首頁了記得改下 this.$store.commit("set_activeIndex", "/index"); this.$store.commit("set_menuName", ["首頁"]); } },
到此這篇關(guān)于vue通過獲取url中的信息登錄頁面的代碼詳解的文章就介紹到這了,更多相關(guān)vue通過url獲取信息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題
這篇文章主要介紹了vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07基于vue-simplemde實現(xiàn)圖片拖拽、粘貼功能
這篇文章主要介紹了基于vue-simplemde實現(xiàn)圖片拖拽、粘貼功能,需要的朋友可以參考下2018-04-04Vuejs仿網(wǎng)易云音樂實現(xiàn)聽歌及搜索功能
這篇文章主要介紹了Vuejs仿網(wǎng)易云音樂實現(xiàn)聽歌及搜索功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-03-03