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

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

修改MainLayout

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

<Layout SideWidth="0" IsPage="true" IsFullSide="true" IsFixedHeader="true" IsFixedFooter="true"
        ShowFooter="true" ShowCollapseBar="true" OnCollapsed="@OnCollapsed" Menus="@_menuItems">
    <Header>
            <span class="ms-3 flex-sm-fill d-none d-sm-block">BlazorLearn</span>
        <div class="flex-fill d-sm-none">
        </div>
        <Logout ImageUrl="images/argo-c.png" DisplayName="@_user.Name" UserName="@_user.UserName">
                    <LinkTemplate>
                        <LogoutLink Url="/api/account/logout"></LogoutLink>
                    </LinkTemplate>
                </Logout>
    </Header>
    <Side>
            <div class="layout-banner">
                <img class="layout-logo" src="images/Argo.png" />
                <div class="layout-title">
                    <span>BlazorLearn</span>
                </div>
            </div>
        </Side>
    <Main>
        <CascadingValue Value="this" IsFixed="true">
            @Body
        </CascadingValue>
    </Main>
    <Footer>
        <div class="text-center flex-fill">
            <a href="/" target="_blank">BlazorLearn</a>
        </div>
    </Footer>
</Layout>

@code
{
    private bool IsCollapsed { get; set; }
    
    private List<MenuItem>? _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<MenuItem> CreateMenuItems(List<MenuEntity> menus, int parentId)
    {
        var selectedMenus = new List<MenuItem>();
        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;
    }
}

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

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

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

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

修改AdminHandler

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

    public override Task<bool> 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);
    }

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

修改LoginController

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

public class AccountController: IDynamicApiController
{
    public async Task<object> PostLogin([FromBody]LoginVo loginVo)
    {
        if (string.IsNullOrEmpty(loginVo.UserName))
        {
            return new { code = 50000, message = "用户名不能为空" };
        }
        if (string.IsNullOrEmpty(loginVo.Password))
        {
            return new { code = 50000, message = "密码不能为空" };
        }

        var password = MD5Encryption.Encrypt(loginVo.Password);
        var user = await UserEntity.Where(x =>
            x.UserName == loginVo.UserName && x.Password == password).Include(x => x.Role).FirstAsync();
        if (user != null)
        {
            var identity = new ClaimsIdentity(CookieAuthenticationDefaults.AuthenticationScheme);
            identity.AddClaim(new Claim(ClaimTypes.Name, user.UserName!));
            identity.AddClaim(new Claim(ClaimTypes.Role, user.Role!.Id.ToString()));
            await Furion.App.HttpContext.SignInAsync(new ClaimsPrincipal(identity), new AuthenticationProperties(){IsPersistent = true, ExpiresUtc = loginVo.RememberMe? DateTimeOffset.Now.AddDays(5): DateTimeOffset.Now.AddMinutes(30)});

            return new { code = 20000, message = "登录成功" };
        }
        return new { code = 50000, message = "用户名或密码错误" };
    }

    [Authorize]
    public async Task<IActionResult> GetLogout()
    {
        await Furion.App.HttpContext.SignOutAsync();
        return new RedirectResult("/Login");
    }
}

这里我们直接给Logout加[Authorize]，只有登录以后才能访问。

代码在github:https://github.com/j4587698/BlazorLearnj，分支lesson9。