本文介绍 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. 理解es6 Promise的resolve和reject方法

    Promise.resolve() 有时需要将现有对象转为 Promise 对象,Promise.resolve方法就起到这个作用. const jsPromise = Promise.resolve ...

  2. ABC350

    A link 把最后三位取成数字,判断是否小于\(349\),大于\(1\),不等于\(316\). 点击查看代码 #include<bits/stdc++.h> using namesp ...

  3. python+selenium基础之XPATH定位（第一篇）

    世界上最远的距离大概就是明明看到一个页面元素站在那里,但是我却定位不到!! selenium定位元素的方法有很多种,像是通过id.name.class_name.tag_name.link_text等 ...

  4. 在Linux中清理Buff/cache

    在 Linux 中,缓冲区和缓存是为提高系统性能而保留的,但如果这些缓存过多,可能会消耗大量内存,影响系统的性能.有时候,您可能需要手动清理这些缓存以释放内存.但请注意,通常不建议定期或频繁地这样做, ...

  5. 【Java-GUI】08 Swing02 边框和选择器

    边框案例: package cn.dzz.swing; import javax.swing.*; import javax.swing.border.*; import java.awt.*; pu ...

  6. 【转载】 日内瓦大学 & NeurIPS 2020 | 在强化学习中动态分配有限的内存资源

    原文地址: https://hub.baai.ac.cn/view/4029 ======================================================== [论文标 ...

  7. 这学校真是“nice”——人还未走，网就先停了

    人还没走,手续还没办,网就给我停了,这就要清人了,这学校太"nice"了!!!

  8. vue之es6语法

    1.背景 2.let与var与const的区别 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  9. Redis系列：使用Stream实现消息队列 （图文总结+Go案例）

    ★ Redis24篇集合 1 先导 我们在<Redis系列14:使用List实现消息队列>这一篇中详细讨论了如何使用List实现消息队列,但同时也看到很多局限性,比如: 不支持消息确认机制 ...

  10. 图扑 HT for Web 轻松构建组态拓扑结构

      在现代的数据可视化和网络管理中,拓扑图是一种非常重要的工具.它可以直观地展示节点(Node)和节点之间的关系(Edge).无论是在 2D 还是 3D 环境中,拓扑图都可以帮助我们更好地理解和管理复 ...