从零开始Blazor Server(3)--添加cookie授权

认证方式简述

Blazor Server微软官方还是推荐直接使用Cookie授权，因为本来Blazor Server就是前后端不分离的。不存在Cookie跨域等一系列问题。

只要不是使用SSO之类的统一登录方式，建议直接使用Cookie作为认证方式就行，简单方便。

添加Cookie认证

Blazor添加Cookie认证的方式跟MVC没什么区别，也是在Program.cs里添加对应的认证中间件。

1. 添加Cookie认证方式

builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme).AddCookie();

2. 增加认证中间件

app.UseAuthentication();
app.UseAuthorization();

这个处理是不是跟使用MVC的时候一模一样？

这里需要注意，Blazor Server只有第一次连接的时候会走中间件，之后连接成功就是SingalR了，不会每个请求都走中间件，所以之前的MVC的那种在中间件或者过滤器里进行处理的路子走不通了。

新建Login.razor

我们需要新建一个登录页面，本篇暂时只是放一个占位页，不实现登录，下一篇我们再来完成登录。

这里需要注意，Login页面应该是独立布局的，不应该有MainLayout的菜单布局，但是我们在App.razor里指定了默认布局，这里怎么办呢。

我们选用一种最简单的办法，就是新建一个空布局，让Login页面使用我们的空布局。

首先我们在Shared里面新建一个LoginLayout，这个就是一个空Layout。

LoginLayout.razor：

@inherits LayoutComponentBase

@Body

标准的一个Layout模板，继承于LayoutComponentBase，然后里面只有一个@Body。

然后新建一个Login.razor，指定它的布局为LoginLayout。

Login.razor：

@page "/Login"
@layout LoginLayout

Login

创建RedirectToLogin组件

这个组件没有其他任何作用，就是在未登录时跳转到登录页面。

REdirectToLogin.razor：

@inject NavigationManager NavigationManager

@code {
    protected override void OnInitialized()
    {
        base.OnInitialized();
        NavigationManager.NavigateTo("/Login", true);
    }
}

这里注意，NavigationManager.NavigateTo("/Login", true);方法在Debug时会报错，这个错误我个人认为是微软的锅，在.net 6上目前没找到什么合适的解决办法。这里报错就直接点击继续，不会有任何其他影响，并且Release下不会报错。如果你用Rider的Run来执行，也不会报错。

如果各位大佬知道如何能解决这个报错，请留言告诉我一下，感激不尽。

修改App.razor

这里我们需要把原来的RouteView修改为AuthorizeRouteView。

这个AuthorizeRouteView是Blazor自带的一个授权组件，它内部处理了授权信息，内部有NotAuthorized和Authorizing可供使用。

• NotAuthorized即未授权的情况，这种情况如果不写，默认好像是显示一行文字，Not Authorized。内部是一个RenderFragment所以可以添加任何内容。

• Authorizing是授权认证中显示的文字，我们使用Cookie认证的话一般不会有这种情况，但是如果我们使用统一认证，或者其他网络认证的时候，可能会有等待认证的时间，这时候就会显示这里的内容。

我们需要的是跳转到登录页面，所以我们就在NotAuthorized的时候加载我们的RedirectToLogin的组件即可。

<NotAuthorized>
                    <RedirectToLogin>RedirectToLogin>
                NotAuthorized>

Index页面增加授权

这个最简单，就是在需要授权的页面上增加[Authorize]标签即可。

@attribute [Authorize]

这样我们直接F5运行程序，应该就会发现自动跳转到了Login路径下。

源码在github:https://github.com/j4587698/BlazorLearn，分支为lesson3