从零开始Blazor Server(3)--添加cookie授权
认证方式简述
Blazor Server微软官方还是推荐直接使用Cookie授权,因为本来Blazor Server就是前后端不分离的。不存在Cookie跨域等一系列问题。
只要不是使用SSO之类的统一登录方式,建议直接使用Cookie作为认证方式就行,简单方便。
添加Cookie认证
Blazor添加Cookie认证的方式跟MVC没什么区别,也是在Program.cs
里添加对应的认证中间件。
添加Cookie认证方式
builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme).AddCookie();
增加认证中间件
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
<h3>Login</h3>
创建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