layui实现后台快速登陆功能

需求:在后台的用户列表每一行增加一个快速登陆的按钮  点击之后 直接跳转到对应用户的后台 并且在这个过程中

链接不暴露重要信息 需要进行加密 效果如下:

layui实现后台快速登陆功能_第1张图片layui实现后台快速登陆功能_第2张图片


那么该如何实现呢?

第一步 先对这个快速登陆的按钮绑定事件 然后进行处理

 

快速登录
able.on('tool(LAY-user-lst-manage)', function (obj) {
        var data = obj.data;
        if (obj.event === 'login'){
            var name = data.user_name;
            var show_password = data.show_password;
            var url = 'http://用户后台的登陆地址'+window.btoa('name=' + name+'/password='+show_password);
            window.open(url,"status='no'");
        }
        return false;
    });

这边的处理就是 点击的时候 将用户的姓名和密码base64加密之后 通过get方式提交到 用户后台的登录页  status=no 表示不显示具体信息

第二步 我们来到用户后台的登录页

处理接收的数据


//获取地址
var paramsString = window.location.href;
//因为网址的长度 所以要截取37位 这边视情况而定 不要和我一样!!!
paramsString = paramsString.slice(37);
//如果截取的网址不为空
if(paramsString != ""){
//解密之前的地址
    paramsString = atob(paramsString);
//分割成数组
    paramsString  = paramsString.split("/");
//获取提交的用户名
    var names = paramsString[0].split("=");
//获取提交的密码
    var passwords = paramsString[1].split("=");
//进行赋值
    var name = names[1];
    var password = passwords[1];
}
//如果用户名和密码不为空 就执行登陆的请求
if(name != '' && password!=""){
    admin.req({
          url: '用户后台登陆的请求地址' //
        , data: {"username":name,"password":password}//这里把数据封装成json的了,在springmvc里面会自己解析。
        , dataType: 'jsonp'
        , done: function (res) {
            //请求成功后,写入 access_token
            layui.data(setter.tableName, {
                   key: setter.request.tokenName
                   , value: res.data.token
            });

            layui.data('account', {
                   key: 'username'
                   , value: res.data.name
            });

            //登入成功的提示与跳转
            layer.msg('登入成功', {
            offset: '15px'
            , icon: 1
            , time: 1000
         }, function () {
             location.hash = search.redirect ? decodeURIComponent(search.redirect) : '/';
         });
        }
  })
}

大概的逻辑是写在代码中 可自行查看 

总结一下就是 在按钮那边去提交某个后台登录页需要提交的参数 并且以加密的方式传过去 为了安全考虑

之后 登陆页面那边接收到之后 进行解密 然后获取参数值 去请求登陆所要的接口地址 

完成快速登陆的功能!!


觉得有用的朋友点赞加关注吧!!!

有问题的朋友可以在评论区进行留言

你可能感兴趣的:(前端)