Question

在最初显示该应用程序之前，任何人都可以帮助我让托管的Blazor应用程序（客户端，服务器和共享）立即请求登录。我希望用户完全访问该应用程序之前必须先登录。

我的起点是具有Api授权（单个用户帐户）的Blazor Webassembly（托管）模板

在用户请求具有Authorize属性的特定操作/页面之前，在服务器端操作或客户端Razor页面上使用Authorize属性不会启动身份验证流程。在首次显示该应用程序之前，我将如何首先启动授权流程？

我敢肯定，对于比我更精明的人来说，这是可能的，甚至是微不足道的。有人可以朝我正确的方向推吗？

Answer 1

我创建了一个控件RedirectToLogin.razor

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

然后将其插入mainlayout.razor

class AlbumEntry extends Component {
render() {
    return (
        <Card style={{ margin: '5px', display: 'inline-block', width: '250px', height: '550px', maxHeight: '550px' }}>
            <Card.Img variant="top" src={this.props.imgSrc}/>
            <Card.Body style={{display: 'inline-block'}}>
                <Card.Title> {this.props.albumTitle} </Card.Title>
                <Card.Text> {this.props.albumArtist} </Card.Text>
                <Button variant="primary">Go to Album </Button>
            </Card.Body>
        </Card>
    );
}
}

因此，当加载布局并且它处于NotAuthorized状态时，它将重定向到登录页面，并且在授权后将返回到它试图访问的页面。

希望这会有所帮助。

Answer 2

Blazor客户端从index.html中的静态wwwroot引导。在服务器项目中，它映射到Startup.cs中的一个端点，基本上是所有您的Razor页面或控制器未采用的端点的全部内容：

app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapControllers();
    endpoints.MapFallbackToFile("index.html");
});

针对您的情况：

在服务器中创建一个新布局，例如_LayoutBlazor.cshtml
从客户端重新创建index.html的内容。请注意，在构建时，来自客户端的_framework文件已复制到服务器wwwroot：：

<app>Loading...</app>

<script src="@Href("~/_framework/blazor.webassembly.js")"></script>
创建一个新的Razor页面，并在其上放置“ Authorize”标签，然后使用_LayoutBlazor。
从Startup.cs中删除endpoints.MapFallbackToFile("index.html");

Mark Gould在这里创建了概念证明：RazorBlazor

Blazor托管-在显示应用程序之前立即进行授权

2 个答案: