本文介绍 Blazor 静态服务端呈现（静态 SSR）模式下，用户登录身份认证是如何实现的。

1. SSR 简介

SSR 是服务器侧呈现，HTML 是由服务器上的 ASP.NET Core 运行时生成，通过网络发送到客户端，供客户端的浏览器显示。SSR 分两种类型：

  • 静态 SSR：服务器生成静态 HTML，它不提供用户交互性或维护 Razor 组件状态，通过 HTTP 协议进行通信。
  • 交互式 SSR：Blazor 事件允许用户交互，并且 Razor 组件状态由 Blazor 框架维护，通过 SignalR 连接使用 WebSocket 协议进行通信。

2. 为什么用静态 SSR

由于交互式 SSR 存在断线重连的问题，影响用户体验，所以采用静态 SSR 组件呈现服务端内容，为了增加前端交互体验，采用 JavaScript 作为前端交互。

3. 实现思路

  • 在 App.razor 文件中使用级联参数的 HttpContext 对象获取用户是否登录
  • 将用户登录信息传递给路由组件的级联 Context 对象，
  • 在所有子组件中，使用级联参数的 Context 对象获取用户信息
  • 使用 HttpContext.SignInAsync 和 HttpContext.SignOutAsync 实现登录和注销

4. 实现步骤

  • 创建 UserInfo 和 Context 类
public class UserInfo

{

    public string UserName { get; set; }

}

public class Context

{

    public UserInfo CurrentUser { get; set; }

}
  • 创建 App.razor 文件
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

</head>

<body>

    <Routes User="user" />

</body>

</html>

@code {

    [CascadingParameter] private HttpContext HttpContext { get; set; }

    private UserInfo user;

    protected override void OnInitialized()

    {

        base.OnInitialized();

        if (HttpContext.User.Identity.IsAuthenticated)

            user = new UserInfo { UserName = HttpContext.User.Identity.Name };

        else

            user = null;

    }

}
  • 创建 Route.razor 文件
<CascadingValue Value="context" IsFixed>

    <Router AppAssembly="typeof(Program).Assembly">

        <Found Context="routeData">

            <RouteView RouteData="routeData" />

        </Found>

        <NotFound></NotFound>

    </Router>

</CascadingValue>

@code {

    private UIContext context;

    [Parameter] public UserInfo User { get; set; }

    protected override void OnInitialized()

    {

        context = new Context();

        context.CurrentUser = User;

        base.OnInitialized();

    }

}
  • 创建 LoginBox.razor 文件
@if (Context.CurrentUser == null)

{

    <span onclick="login()">登录</span>

    <script>

        function login() { fetch('/signin').then(res => location.reload()); }

    </script>

}

else

{

    <span onclick="logout()">退出</span>

    <script>

        function logout() { fetch('/signout').then(res => location.reload()); }

    </script>

}

@code {

    [CascadingParameter] private Context Context { get; set; }

}
  • 创建 AuthController.cs 文件
public class AuthController : ControllerBase

{

    private const string AuthType = "App_Cookie";

    [Route("signin")]

    public async Task Login([FromBody] UserInfo info)

    {

        var claims = new List<Claim>() { new(ClaimTypes.Name, info.UserName) };

        var identity = new ClaimsIdentity(claims, AuthType);

        var principal = new ClaimsPrincipal(identity);

        await HttpContext.SignInAsync(AuthType, principal);

    }

    [Route("signout")]

    public async Task Logout()

    {

        await HttpContext.SignOutAsync(AuthType);

    }

}

Blazor静态服务端呈现（静态SSR）身份认证的更多相关文章

  1. 移动 APP 端与服务器端用户身份认证的安全方案

    最近要做一个项目是java开发后端服务,然后移动APP调用.由于之前没有接触过这块,所以在网上搜索相关的方案.然后搜到下面的一些方案做一些参考. 原文:移动 APP 端与服务器端用户身份认证的安全方案 ...

  2. 数往知来 ASP.NET 模拟服务器:服务端_静态页面_动态页面的响应<十七>

      一.客户端是怎么看到我们的网页的呢/ 在浏览器端,如果用汉语请求的是一普通的HTML网页,呢么我们的IIS服务器, 接收到请求以后,那么从IIS服务器所在的电脑区查找该HTML网页, 找到以后将该 ...

  3. Vue 服务端渲染（SSR）

    什么是服务端渲染? 简单理解是将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务端渲染的优点 更好的SEO,搜索引 ...

  4. 服务端渲染（ssr）初了解

    之前接触的比较多的是SPA单页面应用,前端路由渲染,对于node服务端渲染刚开始了解到,服务端渲染的话相对于SPA来说有助于SEO优化,首屏加载更快. 和之前的SPA项目不同,之前公司spa的发布部署 ...

  5. 6.前端基于react,后端基于.net core2.0的开发之路（6） 服务端渲染（SSR）

    0.源码地址 https://gitee.com/teambp/ScaffoldClient  这个地址下载对应源码. 1.服务端渲染是啥? 就是在服务器进行页面渲染(废话),当页面展示后,显示的就是 ...

  6. Vue 爬坑之路（十一）—— 基于 Nuxt.js 实现服务端渲染（SSR）

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...

  7. [原]Nginx+Lua服务端合并静态文件

    http://homeway.me 0x01.About 源代码已经上传到github:https://github.com/grasses/nginx-lua-static-merger nginx ...

  8. 百度vue服务端渲染（ssr）有感

    前端各种框架工具层次不穷,日新月异,越学越混乱了快 知乎上看到了一段回复,豁然开朗的感觉. Web 2.0时代最大的思想革命本质不是前后端分离,而是把网页当作独立的应用程序(app).前后端分离只是实 ...

  9. 实现ssr服务端渲染

    前言 前段时间寻思做个个人网站,然后就立马行动了.  个人网站如何实现选择什么技术方案,自己可以自由决定.  刚好之前有大致想过服务端渲染,加载速度快,还有 SEO 挺适合个人网站的.  所以就自己造 ...

  10. 实现一个类似 http-server 的静态服务 一一 ks-server

    最近没事,学习了一下 node,觉得 http-server 这个静态服务很神奇,突发奇想,自己也来实现这么一个静态服务试试.我暂且起名为 static-server. 1. 初始化项目: cd my ...

随机推荐

  1. microsoft office object版本对应offices版本

    1997年 Excel 97 Microsoft Excel 8.0 1999年 Excel 2000 Microsoft Excel 9.0 2001年 Excel XP Microsoft Exc ...

  2. oeasy教您玩转linux010206 蒸汽机车 sl

    我们来回顾一下 上一部分我们都讲了什么? 两种字符画 从figlet开始️ 到toilet 字符画选项 变彩色 字体效果 figlet oeasy toilet oeasy 这里面还有什么好玩的游戏可 ...

  3. Netty的源码分析和业务场景

    Netty 是一个高性能.异步事件驱动的网络应用框架,它基于 Java NIO 构建,广泛应用于互联网.大数据.游戏开发.通信行业等多个领域.以下是对 Netty 的源码分析.业务场景的详细介绍: 源 ...

  4. JavaScript 中的闭包和事件委托

    包 (Closures) 闭包是 JavaScript 中一个非常强大的特性,它允许函数访问其外部作用域中的变量,即使在该函数被调用时,外部作用域已经执行完毕.闭包可以帮助我们实现数据的私有化.封装和 ...

  5. 【SVN】属性功能配置

    一.配置SVN提交模板 更改SVN提交信息模板 (参考源博客): https://www.cnblogs.com/fairylyl/p/10505833.html 右键属性配置: 新建一项属性,选择[ ...

  6. 【Hibernate】Re07 关系映射处理

    一.单向多对一关系映射处理 演示案例列举了员工与部门的关系,一个部门下具有多个员工,相反的一个员工只隶属于一个部门下面 Maven依赖坐标: <dependency> <groupI ...

  7. ubuntu18.04环境下如何为 vs code 实现ftp功能

    如前文所述  https://www.cnblogs.com/devilmaycry812839668/p/14797739.html , 在vs code 自身环境下的ftp功能插件难以使用,而在W ...

  8. PEP 703作者给出的一种no-GIL的实现——python3.9的nogil版本

    PEP 703的内容是什么,意义又是什么呢? 可以说python的官方接受的no-GIL提议的PEP就是PEP 703给出的,如果GIL帧的从python中移除那么可以说对整个python生态圈将有着 ...

  9. 英雄钢笔359色 EF尖 与 凌美(LAMY) 狩猎者 磨砂黑EF尖——长期使用对比

    首先说明一下,这两个钢笔我都是长期使用了,凌美用了两三年了,英雄的那个用了也快半年了. 两款钢笔细节: 英雄:https://item.jd.com/1002650.html 凌美钢笔:https:/ ...

  10. 再探 游戏 《 2048 》 —— AI方法—— 缘起、缘灭（4） —— state-of-the-art

    <2048>游戏在线试玩地址: https://play2048.co/ 该游戏的解法比较不错的资料为外网的一个讨论帖子: What is the optimal algorithm fo ...