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

最新推荐文章于 2024-03-11 14:26:52 发布

itfallrain

最新推荐文章于 2024-03-11 14:26:52 发布

阅读量2.6k

点赞数 3

分类专栏： jeecgboot

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

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

版权

jeecgboot 专栏收录该内容

27 篇文章 8 订阅

订阅专栏

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();
        }
      },

      //用户快捷登录结束

itfallrain

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
jeecg-boot 2.2 管理用户快速登录

1：使用场景，通过用户信息实现快速跳转登录2：实现的基本思路通过登录按钮把用户的基本信息传到后台登录接口后台写一个判断，可以省去密码验证码等的验证，通过用户id获取用户信息，然后生成需要返回的信息就行了通过第二步后台其他的就不用动了，后回到前端。https://www.cnblogs.com/yanqiong/p/10469479.html上面有个链接是vue跨页面调用方法的步骤，通过这个方法，你可以在用户管理界面写一个方法，在Login,这个页面写一个快速登录方法：functionB
复制链接

扫一扫