从零开始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();
  1. 增加认证中间件

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自带的一个授权组件,它内部处理了授权信息,内部有NotAuthorizedAuthorizing可供使用。

  • 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

发表评论

相关文章