80.权限重构

未匹配的标注

本节说明

  • 对应视频教程第 80 小节:Refactoring Authorization

本节内容

我们认为Best Reply按钮的权限只有话题的创建者才拥有,但是Best Reply按钮显示在Reply组件中。所以本节我们对页面的权限做些重构,以便更方便地进行功能的开发。首先我们新建控制权限的辅助方法:
forum\resources\assets\js\authorizations.js

let user = window.App.user;

module.exports = {
    updateReply (reply) {
       return reply.user_id === user.id;
    }
};

然后我们使用它:
forum\resources\assets\js\bootstrap.js

.
.
window.Vue = require('vue');

let authorizations = require('./authorizations');

Vue.prototype.authorize = function (...params) {
    if (! window.App.signedIn) return false;

    if (typeof params[0] === 'string') {
        return authorizations[params[0]](params[1]);
    }
    return params[0](window.App.user);
};

Vue.prototype.signedIn = window.App.signedIn;
.
.

由于signedIn在多个地方用到,所以在这里我们将其注册为全局变量。

注:在app.blade.phpNewReply.vue两个文件中,使用的是signIn,要修改为signedIn

然后我们就可以修改权限控制的地方:
forum\resources\assets\js\components\Reply.vue

<template>
.
.
    <div class="panel-footer level">
            <div v-if="authorize('updateReply',reply)">
                <button class="btn btn-xs mr-1" @click="editReply">Edit</button>
                <button class="btn btn-xs btn-danger mr-1" @click="destroy">Delete</button>
            </div>

            <button class="btn btn-xs btn-default ml-a" @click="markBestReply" v-show="! isBest">Best Reply</button>
        </div>
    </div>
</template>
<script>
.
.
    data() {
            return {
              editing: false,
              id: this.data.id,
              body: this.data.body,
              isBest: false,
              reply: this.data
            };
        },
        .
        .
        computed: {
            ago() {
              return moment(this.data.created_at).fromNow() + '...';
            }
        },
        .
        .
</script>

去掉NewReply.vuecomputed,因为我们已经全局注册了signedIn。我们在下一节继续开发最佳回复的功能。

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 0
发起讨论 只看当前版本


暂无话题~