本文介绍 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. Java学习_重置版一：Java语言基础之数据和标识符等

    第一:关键字 (1)被Java语言赋予特定含义的单词 (2)特点:全部小写. (3)注意事项:         A:goto和const作为保留字存在.         B:类似于Notepad++这 ...

  2. 最佳 AI 翻译工作流：全世界最信达雅的翻译

    吴恩达老师提出了一种反思翻译的大语言模型 (LLM) AI 翻译工作流程--GitHub - andrewyng/translation-agent,具体工作流程如下: 提示一个 LLM 将文本从 s ...

  3. 利用Elasticsearch实现地理位置、城市搜索服务

    最近用到一些简单的地理位置查询接口,基于当前定位获取用户所在位置信息(省市区),然后基于该信息查询当前区域的......提供服务. 然后就自己研究了下GIS,作为一个程序员.自己能不能实现这个功能呢? ...

  4. 【RabbitMQ】02 工作队列模式

    首先编写一个工作队列的生产者: 发送10条消息然后就关闭,10条消息让RabbitMQ先存着 import com.rabbitmq.client.Channel; import com.rabbit ...

  5. 【Vue】Re16 Router 第三部分(懒加载、子路由)

    一.配置路由懒加载 懒加载的原因: 因为组件不断的增加,项目的路由会越来越多 打包后的文件越来越大,当超过IO读写的瓶颈时,项目加载就很慢了 所以需要将路由文件分离,在被调用时进行加载 分析路由ind ...

  6. 鹏程实验室，启智平台，openI平台，积分兑换新标准

    2024-02-13 11:12:21 星期二 地址: https://openi.pcl.ac.cn/reward/point/rule

  7. ubuntu desktop改用无桌面方式启动

    事情是这样的,平时需要使用Ubuntu系统跑一下深度学习的AI代码,但是有时候就会十分的尴尬的遇到显存差几百兆不够的时候,这时候就能看到显卡上正好有这部分显存被Ubuntu的可视化界面的desktop ...

  8. 《Python数据可视化之matplotlib实践》 源码 第三篇 演练 第八章

    图  8.1 import matplotlib.pyplot as plt import numpy as np plt.axes([0.05, 0.7, 0.3, 0.3], frameon=Tr ...

  9. 如何配置域名的 CNAME —— 添加记录集时，为什么会提示“与已有解析记录冲突”？

    参考: https://support.huaweicloud.com/dns_faq/dns_faq_016.html https://developer.qiniu.com/fusion/kb/1 ...

  10. spring5的新特性

    1.背景 2.依赖环境的变化 整个 Spring5 框架的代码基于 Java8,运行时兼容 JDK9,许多不建议使用的类和方 法在代码库中删除 3.自带了通用的日志封装 3.1.日志的简单使用 Spr ...