easyadmin layui js监听返回结果,进行token验证防止连点

记录:easyadmin layui js监听返回结果

1.页面增加TOKEN隐藏值

html 复制代码
<input type="hidden" name="TOKEN" value="{$row.id}">

2.JS监听返回结果,若失败,则赋值页面TOKEN值

js 复制代码
define(["jquery", "easy-admin"], function ($, ea) {

    var init = {
        table_elem: '#currentTable',
        table_render_id: 'currentTableRenderId',
        show_url: 'cangku.bcktz/show',
        createCkd_url: 'cangku.bcktz/createCkd',
    };

    var Controller = {
        show: function () {
            ea.listen();
        },
        createCkd:function () {
            // ea.listen();
            ea.listen(function (data) {
                // 提交保存的数据
                return data;
            }, function (res) {
                // 成功
                ea.msg.success(res.msg, function () {
                    ea.api.closeCurrentOpen({
                        refreshTable: 'currentTableRenderId'
                    });
                });
            }, function (res) {
                // 失败 
                ea.msg.error(res.msg, function () {
                    if(res.data && res.data.token){
                        $('input[name=TOKEN]').val(res.data.token);
                    }
                });
            });
        },
    };
    return Controller;
});

3.功能

php 复制代码
public function createCkd($id)
{
    if ($this->request->isAjax() && $this->request->isPost()) {
        if(jianYanToken(input('TOKEN')) === false){
            $this->error('token失效,请刷新页面', ['token'=>getToken()]);
        }
        $data = [
            ......
        ];
        $result = $this->logic->createCkd($data);
        if($result['status'] !== 'success'){
            $this->error($result['msg'], ['token'=>getToken()]);
        }
        $this->success('保存成功');
    }
    $this->assign('TOKEN', getToken());
    return $this->fetch();
}

4.common.php 定义token方法

php 复制代码
use think\facade\Cache;

// 生成token
function createToken($length=32) {
    $str = '12356789ABCDEFGHIJKLMNOPQRSTUVWXYZ';//34个字符
    $strlen = 34;
    while($length > $strlen){
        $str .= $str;
        $strlen += 34;
    }
    $str = str_shuffle($str);   //随机地打乱字符串中的所有字符
    $token = substr($str,0,$length); //截取字符串
    Cache::tag('pageToken')->set('pageToken_' . session('admin.id'), $token);
    return $token;
}

// 验证token
function jianYanToken($token) {
    if($token != Cache::get('pageToken_' . session('admin.id'))){
        return false;
    }
    createToken();  //重置token
    return true;
}
// 获取token
function getToken() {
    $token = Cache::get('pageToken_' . session('admin.id'));
    if(!$token){
        $token = createToken();  //生成token
    }
    return $token;
}
相关推荐
编程猪猪侠1 小时前
解决yarn install 报错 error \node_modules\electron: Command failed.
前端·javascript·electron
来自星星的坤6 小时前
Vue 3中如何封装API请求:提升开发效率的最佳实践
前端·javascript·vue.js
vvilkim8 小时前
全面解析React内存泄漏:原因、解决方案与最佳实践
前端·javascript·react.js
vvilkim8 小时前
React批处理(Batching)更新机制深度解析
前端·javascript·react.js
Bayi·8 小时前
前端面试场景题
开发语言·前端·javascript
程序猿熊跃晖8 小时前
Vue中如何优雅地处理 `<el-dialog>` 的关闭事件
前端·javascript·vue.js
进取星辰8 小时前
12、高阶组件:魔法增幅器——React 19 HOC模式
前端·javascript·react.js
拉不动的猪9 小时前
前端低代码开发
前端·javascript·面试
知识分享小能手9 小时前
JavaScript学习教程,从入门到精通,Ajax与Node.js Web服务器开发全面指南(24)
开发语言·前端·javascript·学习·ajax·node.js·html5
Danta10 小时前
百度网盘一面值得look:我有点难受🤧🤧
前端·javascript·面试