本文介绍 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. apache ab.exe压力测试

    ab.exe是一个性能检测工具,是apache server中的一个小组件,使用简单,方便     下载地址:http://files.cnblogs.com/files/gossip/ab.zip ...

  2. [oeasy]python0088_字节_Byte_存储单位_KB_MB_GB_TB

    编码进化 回忆上次内容 上次 回顾了 字符大战的结果 ibm 曾经的 EBCDIC 由于字符不连续的隐患 导致后续 出现 无数问题 无法补救 7-bit 的 ASA X3.4-1963 字母序号连续 ...

  3. [oeasy]python0074_修改字体背景颜色_background_color_背景色

    修改背景色 回忆上次内容 上次将asciiart和颜色一起来玩 7 种基本色 变化多端 不过到目前为止 改的 都是前景色 背景色可以修改吗? 重温参数 具体动手试试 print("\033[ ...

  4. c++17 structure binding test

    1 /*test for struct binding*/ 2 3 #include <string> 4 #include <iostream> 5 using namesp ...

  5. Python版WGCNA分析和蛋白质相互作用PPI分析教程

    在前面的教程中,我们介绍了使用omicverse完成基本的RNA-seq的分析流程,在本节教程中,我们将介绍如何使用omicverse完成加权基因共表达网络分析WGCNA以及蛋白质相互作用PPI分析. ...

  6. web3 产品介绍：Mirror.xyz是一个创新的去中心化出版平台

    Mirror.xyz是一个创新的去中心化出版平台,它使作者能够创建.发布和管理自己的内容,并与读者建立直接的经济联系.在本文中,我们将介绍Mirror.xyz的主要特点.功能以及如何使用它来发布和消费 ...

  7. 【Spring Data JPA】09 多表关系 Part2 多对多关系操作

    环境搭建: 用户类: package cn.echo42.domain; import javax.persistence.*; import java.util.HashSet; import ja ...

  8. 【Vue】13 VueRouter Part3 路由守卫

    单页应用中,只存在一个HTML文件,网页的标签,是通过title标签显示的,我们在单页应用中如何修改? JS操作: window.document.title = "标签名称" 也 ...

  9. 【转载】 TensorFlow之name_scope/variable_scope

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/u013745804/article/de ...

  10. mindspore.ops.Pow()等算子不能处理float64类型的数据

    原文地址: https://gitee.com/mindspore/mindspore/issues/I3ZG99 Software Environment: -- MindSpore r1.2 GP ...