Laravel-admin 列表添加自定义按钮并添加了自定义JS

阅读 (14871)
Laravel Laravel-admin在后台列表中自定义操作添加javascript异步请求时需到请求失败的情况

laravel-admin 列表添加自定义按钮,并添加了自定义JS,实现审核操作,由于开启csrf保护,ajax请求中设置_token值,值从全局LA变量中获取

        return Admin::grid(AdminBatchReview::class, function (Grid $grid) {
            $grid->disableRowSelector();
            $grid->disableCreation();
            $grid->disableExport();

            $grid->model()->orderBy('id', 'desc');

            $this->script = <<<EOT
$('.grid-row-pass').unbind('click').click(function() {
    var id = $(this).data('id');

    swal({
        title: "确定通过吗?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "确认",
        closeOnConfirm: false,
        cancelButtonText: "取消",
        showLoaderOnConfirm: true
    },
    function(){
        $.ajax({
            method: 'post',
            url: '/admin/review/pass/' + id,
            data: {
                _token:LA.token,
            },
            success: function (data) {
                $.pjax.reload('#pjax-container');

                if (typeof data === 'object') {
                    if (data.status) {
                        swal(data.message, '', 'success');
                    } else {
                        swal(data.message, '', 'error');
                    }
                }
            }
        });
    });
});
$('.grid-row-refusal').unbind('click').click(function() {
    var id = $(this).data('id');


    swal({
        title: "确定驳回吗?",
        text: "驳回理由:",
        type: "input",
        showCancelButton: true,
        closeOnConfirm: false,
        animation: "slide-from-top",
        inputPlaceholder: "驳回理由",
        cancelButtonText: "取消",
        closeOnCancel: true,
        showLoaderOnConfirm: true
    },
    function(inputValue){
        if (inputValue === false) return false;

        if (inputValue === "") {
          swal.showInputError("你需要输入拒绝理由!");
          return false
        }

        $.ajax({
            method: 'post',
            url: '/admin/review/refusal/' + id,
            data: {
                _token:LA.token,
                refusal:inputValue
            },
            success: function (data) {
                $.pjax.reload('#pjax-container');

                if (typeof data === 'object') {
                    if (data.status) {
                        swal(data.message, '', 'success');
                    } else {
                        swal(data.message, '', 'error');
                    }
                }
            }
        });
    });
});
EOT;
            Admin::script($this->script);

            $grid->actions(function ($actions) {
                $actions->disableDelete();
                $actions->disableEdit();

                $actions->append("<div class='mb-5'><a class='btn btn-xs action-btn btn-success grid-row-pass' data-id='{$actions->getKey()}'><i class='fa fa-check'></i> 通过</a></div>");
                $actions->append("<div class='mb-5'><a class='btn btn-xs action-btn btn-danger grid-row-refusal' data-id='{$actions->getKey()}'><i class='fa fa-ban'></i> 驳回</a></div>");

            ...
            // 其它逻辑代码

如上代码即可以现添加自定义按钮并发送异步请求的功能

但是laravel-admin后台使用了Pjax技术进行页面刷新

这样上面的代码在局部刷新后LA.token变量再次被使用时,就无法通过CSRF,所以针对自定义的按钮单独关闭CSRF

在Middleware中 编辑VerifyCsrfToken.php

protected $except = [
        'admin/*/pass/*',
        'admin/*/refusal/*',
];

CSRF是个好东西,但在使用 laravel 的这两年里,需到很多次CSRF的坑,但完全关闭CSRF并不合适,熟悉之后,坑踩多了就好了

更新于:2018-05-12 16:11:20
返回顶部