1:使用場景,通過用戶信息實現快速跳轉登錄
2:實現的基本思路
- 通過登錄按鈕把用戶的基本信息傳到後臺登錄接口
- 後臺寫一個判斷,可以省去密碼驗證碼等的驗證,通過用戶id獲取用戶信息,然後生成需要返回的信息就行了
- 通過第二步後臺其他的就不用動了,後回到前端。
https://www.cnblogs.com/yanqiong/p/10469479.html
- 上面有個鏈接是vue跨頁面調用方法的步驟,通過這個方法,你可以在用戶管理界面寫一個方法,在Login,這個頁面寫一個快速登錄方法:functionB()
- 下面掉用的方法或者引入的東西沒有引入的話,你自己引入一下這裏是引入的js裏面的方法
...mapActions([ "Login", "Logout","PhoneLogin","ThirdLogin","GetPermissionList","UpdateAppRouter" ]),
functionB(record) {
let that=this
this.currdatetime = new Date().getTime();
Vue.ls.remove(ACCESS_TOKEN)
this.getRouterData();
this.handleChangeCheckCode();
this.Login(record).then((res) => {
that.departConfirm(res)
this.functionC(res.result.token)
}).catch((err) => {
that.requestFailed(err);
});
},
functionC(token) {
let constRoutes = [];
this.GetPermissionList(token).then((res) =>{
});
clearTimeout(this.timer);
this.timer = setTimeout(()=>{
console.log("延時3秒");
this.reload()
},1000);
this.timer = setTimeout(()=>{
this.GetPermissionList().then((res) =>{
constRoutes = generateIndexRouter(res.result.menu);
this.UpdateAppRouter(constRoutes).then((res) =>{
});
});
},1000);
},
- src\store\modules\permission.js
import router from '../../router'
// 動態添加主界面路由,需要緩存
UpdateAppRouter({ commit }, routes) {
return new Promise(resolve => {
//const [ roles ] = routes.constRoutes
let routelist
if(routes.constRoutes == undefined || routes.constRoutes == null){
router.addRoutes(routes)
routelist = routes;
}else{
routelist = routes.constRoutes;
}
commit('SET_ROUTERS', routelist)
resolve()
})
}
- src\store\modules\user.js
// 獲取用戶信息
GetPermissionList({ commit },token) {
return new Promise((resolve, reject) => {
let v_token = Vue.ls.get(ACCESS_TOKEN);
let params={}
if(token !=undefined ||token !=null){
params = {token:token};
}else{
params = {token:v_token};
}
queryPermissionsByUser(params).then(response => {
const menuData = response.result.menu;
const authData = response.result.auth;
const allAuthData = response.result.allAuth;
//Vue.ls.set(USER_AUTH,authData);
sessionStorage.setItem(USER_AUTH,JSON.stringify(authData));
sessionStorage.setItem(SYS_BUTTON_AUTH,JSON.stringify(allAuthData));
if (menuData && menuData.length > 0) {
//update--begin--autor:qinfeng-----date:20200109------for:JEECG-63 一級菜單的子菜單全部是隱藏路由,則一級菜單不顯示------
menuData.forEach((item, index) => {
if (item["children"]) {
let hasChildrenMenu = item["children"].filter((i) => {
return !i.hidden || i.hidden == false
})
if (hasChildrenMenu == null || hasChildrenMenu.length == 0) {
item["hidden"] = true
}
}
})
console.log(" menu show json ", menuData)
//update--end--autor:qinfeng-----date:20200109------for:JEECG-63 一級菜單的子菜單全部是隱藏路由,則一級菜單不顯示------
commit('SET_PERMISSIONLIST', menuData)
} else {
reject('getPermissionList: permissions must be a non-null array !')
}
resolve(response)
}).catch(error => {
reject(error)
})
})
},
- 踩得坑:router.addRoutes(routes)第二步這個一定不能忘,要不然就算成功跳轉頁面,左側菜單加載出來了,路由信息也有可能不正確。
3:雖然代碼不多,但也是一點一點研究出來的,覺得有用點個贊吧!!!