jeecg-boot 2.2 管理用戶快速登錄

1:使用場景,通過用戶信息實現快速跳轉登錄

在這裏插入圖片描述

2:實現的基本思路

  1. 通過登錄按鈕把用戶的基本信息傳到後臺登錄接口
  2. 後臺寫一個判斷,可以省去密碼驗證碼等的驗證,通過用戶id獲取用戶信息,然後生成需要返回的信息就行了
  3. 通過第二步後臺其他的就不用動了,後回到前端。
https://www.cnblogs.com/yanqiong/p/10469479.html
  1. 上面有個鏈接是vue跨頁面調用方法的步驟,通過這個方法,你可以在用戶管理界面寫一個方法,在Login,這個頁面寫一個快速登錄方法:functionB()
  2. 下面掉用的方法或者引入的東西沒有引入的話,你自己引入一下這裏是引入的js裏面的方法...mapActions([ "Login", "Logout","PhoneLogin","ThirdLogin","GetPermissionList","UpdateAppRouter" ]),
functionB(record) {
		//說明一下這裏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);
      
      },
  1. 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()
      })
    }
  1. 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)
        })
      })
    },
  1. 踩得坑:router.addRoutes(routes)第二步這個一定不能忘,要不然就算成功跳轉頁面,左側菜單加載出來了,路由信息也有可能不正確。

3:雖然代碼不多,但也是一點一點研究出來的,覺得有用點個贊吧!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章