vue通過(guò)獲取url中的信息登錄頁(yè)面的代碼詳解
在主界面獲取到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>將存儲(chǔ)到localStorage中的信息發(fā)生請(qǐng)求 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("登錄成功!");
//儲(chǔ)存token,賬號(hào),密碼
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,
});
//將密鑰一起加密儲(chǔ)存,后續(xù)解密時(shí)要用到
this.$Cookie.set(
"sk",
CryptoJS.AES.encrypt(this.secretKey, "de43a68e4d184aa3"),
{
expires: 30, // 存儲(chǔ)30天
}
);
this.$Cookie.set(
"thinglinkpwd",
CryptoJS.AES.encrypt(this.loginInfo.password, this.secretKey),
{
expires: 30, // 存儲(chǔ)30天
}
);
// this.$router.go(0)
} else {
// 刪除cookie
this.$Cookie.remove("userAcct");
this.$Cookie.remove("thinglinkpwd");
this.$Cookie.remove("sk");
this.$Cookie.remove("tenantCode");
}
// 去往首頁(yè)
this.$router.push("/index");
//修改下首頁(yè)默認(rèn)的路徑和菜單名稱,確保一下側(cè)邊欄以及面包屑的正常展示,換首頁(yè)了記得改下
this.$store.commit("set_activeIndex", "/index");
this.$store.commit("set_menuName", ["首頁(yè)"]);
}
},到此這篇關(guān)于vue通過(guò)獲取url中的信息登錄頁(yè)面的代碼詳解的文章就介紹到這了,更多相關(guān)vue通過(guò)url獲取信息內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問(wèn)題
這篇文章主要介紹了vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問(wèn)題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖方法
這篇文章主要介紹了vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖方法,首先需要新建 .js文件存放防抖方法,引入防抖文件,methods中添加方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
基于vue-simplemde實(shí)現(xiàn)圖片拖拽、粘貼功能
這篇文章主要介紹了基于vue-simplemde實(shí)現(xiàn)圖片拖拽、粘貼功能,需要的朋友可以參考下2018-04-04
Vuejs仿網(wǎng)易云音樂(lè)實(shí)現(xiàn)聽(tīng)歌及搜索功能
這篇文章主要介紹了Vuejs仿網(wǎng)易云音樂(lè)實(shí)現(xiàn)聽(tīng)歌及搜索功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03
Vue CLI3搭建的項(xiàng)目中路徑相關(guān)問(wèn)題的解決
這篇文章主要介紹了Vue CLI3搭建的項(xiàng)目中路徑相關(guān)問(wèn)題的解決,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue實(shí)現(xiàn)聯(lián)動(dòng)選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)聯(lián)動(dòng)選擇,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03

