如何在Blazor WebAssembly中实现Cookie许可（无第三方库依赖）

Blazor WASM运行在客户端，无法使用ASP.NET Core原生GDPR功能依赖的HttpContext，下面是完全基于原生API、不依赖任何第三方库的实现方案，核心是通过JS互操作直接操作浏览器Cookie。

1. 编写Cookie操作的JS工具函数 #

在wwwroot/js目录下创建gdpr-consent.js，实现Cookie的读写逻辑：

// 读取指定名称的Cookie
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

// 设置GDPR许可Cookie，有效期1年
function setGdprConsent(consentGiven) {
    const date = new Date();
    date.setFullYear(date.getFullYear() + 1);
    const expires = `expires=${date.toUTCString()}`;
    // 路径设为根目录，确保全站生效；HTTPS环境下可添加secure属性
    document.cookie = `GDPRConsent=${consentGiven}; ${expires}; path=/; SameSite=Lax`;
}

然后在wwwroot/index.html的<body>末尾引入这个脚本：

<script src="js/gdpr-consent.js"></script>

2. 创建GDPR许可弹窗组件 #

在Shared目录下创建GdprConsent.razor组件，实现UI和交互逻辑：

@inject IJSRuntime JSRuntime

@if (!_consentStatus.HasValue)
{
    <p>加载中...</p>
}
else if (!_consentStatus.Value)
{
    <div class="gdpr-consent-overlay">
        <div class="gdpr-consent-box">
            <h3>隐私与Cookie通知</h3>
            <p>我们使用Cookie来改善您的浏览体验，您可以选择同意或拒绝非必要Cookie。</p>
            <div class="gdpr-consent-buttons">
                <button class="btn btn-primary" @onclick="AcceptConsent">同意</button>
                <button class="btn btn-secondary" @onclick="RejectConsent">拒绝</button>
            </div>
        </div>
    </div>
}

@code {
    private bool? _consentStatus;

    protected override async Task OnInitializedAsync()
    {
        // 初始化时读取Cookie状态
        var consentValue = await JSRuntime.InvokeAsync<string>("getCookie", "GDPRConsent");
        _consentStatus = consentValue == "true";
    }

    private async Task AcceptConsent()
    {
        await JSRuntime.InvokeVoidAsync("setGdprConsent", true);
        _consentStatus = true;
        // 可在此触发同意后的逻辑，比如加载第三方脚本
        await OnConsentAccepted.InvokeAsync();
    }

    private async Task RejectConsent()
    {
        await JSRuntime.InvokeVoidAsync("setGdprConsent", false);
        _consentStatus = false;
        await OnConsentRejected.InvokeAsync();
    }

    // 提供事件供父组件监听许可状态变化
    [Parameter]
    public EventCallback OnConsentAccepted { get; set; }

    [Parameter]
    public EventCallback OnConsentRejected { get; set; }
}

3. 添加基础样式 #

在wwwroot/css/app.css中添加弹窗的样式，确保它固定在页面底部：

.gdpr-consent-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.8);
    color: white;
    padding: 1rem;
    z-index: 1000;
}

.gdpr-consent-box {
    max-width: 800px;
    margin: 0 auto;
}

.gdpr-consent-buttons {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
}

4. 集成到应用中 #

在App.razor中添加这个组件，确保每次页面加载都会检查许可状态：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

<!-- 添加GDPR许可组件 -->
<Shared.GdprConsent 
    OnConsentAccepted="HandleConsentAccepted"
    OnConsentRejected="HandleConsentRejected" />

@code {
    private async Task HandleConsentAccepted()
    {
        // 同意后的自定义逻辑，比如加载Google Analytics等
        // await JSRuntime.InvokeVoidAsync("loadAnalytics");
    }

    private void HandleConsentRejected()
    {
        // 拒绝后的自定义逻辑，比如禁用非必要脚本
    }
}

5. 在应用中读取许可状态 #

如果其他组件需要判断用户的Cookie许可状态，直接通过IJSRuntime调用JS函数即可：

@inject IJSRuntime JSRuntime

@code {
    private async Task<bool> CheckConsentStatus()
    {
        var consentValue = await JSRuntime.InvokeAsync<string>("getCookie", "GDPRConsent");
        return consentValue == "true";
    }
}

关键细节说明 #

• Cookie设置了1年有效期，用户不需要每次访问都重复确认
• SameSite=Lax属性符合现代浏览器的安全要求，避免跨站问题
• HTTPS环境下建议添加secure属性，确保Cookie仅通过HTTPS传输
• 组件提供了事件回调，方便在用户同意/拒绝后执行自定义逻辑

内容的提问来源于stack exchange，提问作者Ogglas