从零开始Blazor Server(9)--修改Layout

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

目前我们的MainLayout还是默认的，这里我们需要修改为BootstrapBlazor的Layout，并且处理一下菜单。

修改MainLayout

BootstrapBlazor已经自带了一个Layout组件，这个组件里常用功能已经很全了，所以我们直接使用这个组件即可。


    
 BlazorLearnspan>
        
        div>
        
                    
                        LogoutLink>
                    LinkTemplate>
                Logout>
    Header>
    
 
 
 
 BlazorLearnspan>
                div>
            div>
        Side>
    
 
 @Body
 CascadingValue>
    Main>
    
 
 BlazorLearna>
        div>
    Footer>
Layout>

@code
{
    private bool IsCollapsed { get; set; }
    
    private List? _menuItems;

    [NotNull]
    private UserEntity? _user;
    
    private Task OnCollapsed(bool collapsed)
    {
        IsCollapsed = collapsed;
        return Task.CompletedTask;
    }
    
    protected override void OnInitialized()
    {
        base.OnInitialized();
        _user = UserEntity.Where(x => x.UserName == Furion.App.User.FindFirstValue(ClaimTypes.Name)).First();
        if (_user == null)
        {
            return;
        }
        _menuItems = CreateMenuItems(MenuEntity.Where(x => x.Roles!.Any(y => y.Id == _user.RoleId)).ToList(), 0);
    }

    private List CreateMenuItems(List menus, int parentId)
    {
        var selectedMenus = new List();
        var selectedMenuEntities = menus.Where(x => x.ParentId == parentId).ToList();

        foreach (var menuEntity in selectedMenuEntities)
        {
            var menuItem = new MenuItem(menuEntity.Name!, menuEntity.Url, menuEntity.Icon);
            menuItem.Items = CreateMenuItems(menus, menuEntity.Id);
            selectedMenus.Add(menuItem);
        }
        return selectedMenus;
    }
}
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

这里没什么需要多说的，每个参数的意义在文档里都比较清楚，如果需要查询具体的含义，可以看这里。

这里需要注意的是，Menus里面必须要定义一个变量，不能直接放一个方法，否则此方法每次跳转都会执行，导致菜单不正常。

另外Logout是一个独立的组件，这个组件其实叫Logout并不贴切，它是一个带有头像，欢迎信息以及下拉菜单的用户信息组件。

这里我们只放一个LogoutLink登出菜单。

修改`AdminHandler`

如果你直接启动项目，会发现Layout不见了，因为我们的Layout里面做了比较多的处理，会有一个需要权限验证的请求。这个请求不会携带Resource，所以不会返回true。就导致Layout一直不显示，所以我们需要处理这种情况，我们目前修改为Resource里不是RouteData的全部都通过验证。

    public override Task PipelineAsync(AuthorizationHandlerContext context, DefaultHttpContext httpContext)
    {
        if (!int.TryParse(context.User.FindFirst(ClaimTypes.Role)?.Value, out var roleId))
        {
            return Task.FromResult(false);
        }
        if (context.Resource is RouteData routeData)
        {
            var routeAttr = routeData.PageType.CustomAttributes.FirstOrDefault(x =>
                x.AttributeType == typeof(RouteAttribute));
            if (routeAttr == null)
            {
                return Task.FromResult(true);
            }
            else
            {
                var url = routeAttr.ConstructorArguments[0].Value as string;
                var permission = MenuEntity
                    .Where(x => x.Roles!.Any(y => y.Id == roleId) && x.Url == url).First();
                if (permission != null)
                {
                    return Task.FromResult(true);
                }
            }
        }
        else
        {
            return Task.FromResult(true);
        }
        
        return Task.FromResult(false);
    }
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
31
32

这样我们再启动应该就可以看到Layout了。

修改LoginController

我们之前只有一个登录，所以我们写了一个LoginController，现在我们需要加入登出，所以我们直接把LoginController改为AccountController，然后内容改为PostLogin、GetLogout。

public class AccountController: IDynamicApiController
{
    public async Task

从零开始Blazor Server(9)--修改Layout

🚀 优质资源分享 🚀

修改MainLayout

修改AdminHandler

修改LoginController

修改`AdminHandler`