后端技术

asp.net core自定义tag实现页面按钮权限

一般我们在开发后台系统的时候都会有权限验证的功能，有菜单权限和按钮权限也许还有数据权限。最近做一个按钮权限发现asp.net core增加了TagHelper，相比HtmlHelper来说可读性更好。微软为我们提供了很多默认实现，这些tag一般是以asp-开头。比如超链接就可以用asp-controller和asp-action来设置要跳转到的action，Razor在渲染的时候替换为a标签的href属性。这种方法更贴近html相对于HtmlHelper来说也更直观一些。

1
<a asp-controller="Speaker" asp-action="Evaluations">Speaker Evaluations</a>

以往我们做按钮权限的时候会扩展一下HtmlHelper，增加一个类似HasPermission的方法判断有没有权限。在没有权限的时候就不渲染按钮。

1
2
3
4
@if (Html.HasPermission("/demo/list:delete"))
{
    <button type="button" class="layui-btn">删除</button>
}

现在我们有了一个新的选择，我们可以在button中增加一个新的属性来判断权限。TagHelper可以通过扩展html标签或者属性来改变输出的html内容。我们的按钮有两种样式a标签和button标签，所以使用了扩展HTML属性的方式。[HtmlTargetElement(Attributes = “tg-permission”)]让我们在Razor页面中任何标签都可以使用tg-permission属性。output.SuppressOutput()的意思是不输出内容，这里会把整个标签从HTML内容中去除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
[HtmlTargetElement(Attributes = "tg-permission")]
public class PermissionCheckerTagHelper : TagHelper
{
    private readonly SideMenuProvider _sideMenuProvider;
    private readonly IHttpContextAccessor _httpContextAccessor;

    public PermissionCheckerTagHelper(SideMenuProvider sideMenuProvider, IHttpContextAccessor httpContextAccessor)
    {
        _sideMenuProvider = sideMenuProvider;
        _httpContextAccessor = httpContextAccessor;
    }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        var permissionAttribute = context.AllAttributes
            .FirstOrDefault(m => m.Name == "tg-permission");
        if (permissionAttribute == null)
        {
            output.SuppressOutput();
            return;
        }

        var user = _httpContextAccessor.HttpContext.User;

        if (!_sideMenuProvider.IsHavePermission(permissionAttribute.Value.ToString(), user.GetUserId()))
        {
            output.SuppressOutput();
        }
    }
}

写完扩展类之后并不能直接使用，还需要在_ViewImports.cshtml中使用@addTagHelper *, Demo.Web注册一下。最后需要判断权限的按钮上只需要增加tg-permission属性即可。

1
<button type="button" class="layui-btn" tg-permission="/demo/list:delete">标签</button>

相比扩展HtmlHelper这种方式代码更少，也更贴近HTML的语法。