jeecg-boot 2.2 管理用户快速登录

最新推荐文章于 2024-09-13 08:39:45 发布

itfallrain

最新推荐文章于 2024-09-13 08:39:45 发布

阅读量2.8k

点赞数 3

分类专栏： jeecgboot

本文为博主原创文章，未经博主同意不得转载

本文链接：https://blog.csdn.net/qq_38215042/article/details/106649077

版权

jeecgboot 专栏收录该内容

27 篇文章 10 订阅

订阅专栏

1：使用场景，通过用户信息实现快速跳转登录

在这里插入图片描述

2：实现的基本思路

通过登录按钮把用户的基本信息传到后台登录接口（\src\views\system\modules\CompanyUserInfo.vue）

 //用户快捷登录开始
      userLoging(record){
        console.log("companyUserInfo.vue :用户快速登录开始"+JSON.stringify(record) )
        this.functionA(record)
      },
      functionA(record){
        console.log("开始调用login.vue ：登录函数")
        Utils.$emit('demo',record);
      },
      //用户快捷登录结束

后台写一个判断，可以省去密码验证码等的验证，通过用户id获取用户信息，然后生成需要返回的信息就行了
通过第二步后台其他的就不用动了，后回到前端。

https://www.cnblogs.com/yanqiong/p/10469479.html

上面有个链接是vue跨页面调用方法的步骤，通过这个方法，你可以在用户管理界面写一个方法，在Login,这个页面写一个快速登录方法：functionB（）
下面掉用的方法或者引入的东西没有引入的话，你自己引入一下这里是引入的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);
      
      },

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：虽然代码不多，但也是一点一点研究出来的，觉得有用点个赞吧！！！

4：另一种方法

<script>
import { generateIndexRouter } from "@/utils/util"
import Vue from 'vue'

 //用户快捷登录开始
      userLoging(record){
        // console.log("companyUserInfo.vue :用户快速登录开始"+JSON.stringify(record) )
        let that = this
        // this.DelQuickLogon()
        this.QuickLogon(record)
        // console.log("储存的监控信息"+JSON.stringify(that.$store.state.user.quickLogon))
        this.functionB(record)
      },
      functionA(record){
        // console.log("开始调用login.vue ：登录函数")
        Utils.$emit('demo',record);
      },
        //用户快捷登录开始
      functionB(record) {
        console.log("传送数据"+JSON.stringify(record.username))
        console.log("登录页面"+JSON.stringify(this.$store.state.user.quickLogon.username))
        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);  //清除延迟执行
        setTimeout(()=>{   //设置延迟执行
            console.log("延时1秒");
            this.reload()
        },1000);
        setTimeout(()=>{   //设置延迟执行
              this.GetPermissionList().then((res) =>{
              constRoutes = generateIndexRouter(res.result.menu);
              this.UpdateAppRouter(constRoutes).then((res) =>{
              });
            });
        },100);
      },
       getRouterData(){
      this.$nextTick(() => {
        if (this.$route.params.username) {
          this.form.setFieldsValue({
            'username': this.$route.params.username
          });
        }
      })
    },
    requestFailed (err) {
        this.$notification[ 'error' ]({
          message: '登录失败',
          description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
          duration: 4,
        });
        this.loginBtn = false;
      },
      loginSuccess () {
        // update-begin- author:sunjianlei --- date:20190812 --- for: 登录成功后不解除禁用按钮，防止多次点击
        // this.loginBtn = false
        // update-end- author:sunjianlei --- date:20190812 --- for: 登录成功后不解除禁用按钮，防止多次点击
        console.log("登录了两次啊======================================")
        this.$router.push({ path: "/dashboard/analysis" })
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`,
        });
      },
      departConfirm(res){
        console.log("来到了部门选择功能")
        if(res.success){
          let multi_depart = res.result.multi_depart
          //0:无部门 1:一个部门 2:多个部门
          if(multi_depart==0){
            this.loginSuccess()
            // this.$notification.warn({
            //   message: '提示',
            //   description: `您尚未归属部门,请确认账号信息`,
            //   duration:3
            // });
          }else if(multi_depart==2){
            this.departVisible=true
            this.currentUsername=this.form.getFieldValue("username")
            this.departList = res.result.departs
          }else {
            this.loginSuccess()
          }
        }else{
          this.requestFailed(res)
          this.Logout();
        }
      },

      //用户快捷登录结束