MVC/Razor Pages与Vue混合环境下id_token获取及复用方案咨询

1. 修复原有方案的同步阻塞问题 #

你的初始思路可行，但同步调用异步方法存在死锁风险，应改为异步获取令牌：

// Razor PageModel示例
public async Task OnGetAsync()
{
    IdentityToken = await HttpContext.GetTokenAsync("id_token");
}

渲染到页面时，建议将令牌注入Vue实例配置，而非全局变量，更符合Vue开发规范：

<script>
const app = Vue.createApp({
  data() {
    return {
      apiSettings: {
        idToken: "@Model.IdentityToken"
      }
    }
  }
})
app.mount('#app')
</script>

2. 通过后端接口动态获取令牌（更安全） #

避免令牌直接暴露在HTML源码中，可新增带授权验证的接口，供Vue组件异步获取：

后端接口（Razor Pages示例） #

[Authorize]
public async Task<IActionResult> OnGetGetIdTokenAsync()
{
    var idToken = await HttpContext.GetTokenAsync("id_token");
    return Json(new { idToken });
}

Vue组件中调用 #

// Vue组件的created钩子中请求
async created() {
  try {
    const response = await fetch('/YourPage?handler=GetIdToken', {
      credentials: 'include' // 携带Cookie确保身份验证
    });
    const data = await response.json();
    this.$root.apiSettings.idToken = data.idToken;
  } catch (err) {
    console.error('获取令牌失败:', err);
  }
}

该方案优势是令牌不会在页面源码中明文显示，降低XSS泄露风险，但会多一次HTTP请求。

3. 利用安全Cookie传递令牌（需权衡安全） #

如果应用已做足XSS防护（如CSP策略、输入过滤），可将id_token存储在非HttpOnly Cookie中（必须设置Secure和SameSite=Strict属性），前端直接读取：

后端配置存储令牌到Cookie #

在OpenID Connect回调后写入Cookie：

public async Task<IActionResult> OnGetCallbackAsync()
{
    var result = await HttpContext.AuthenticateAsync();
    var idToken = result.Properties.GetTokenValue("id_token");
    
    Response.Cookies.Append("id_token", idToken, new CookieOptions
    {
        HttpOnly = false, // 允许JS读取
        Secure = true, // 仅HTTPS传输
        SameSite = SameSiteMode.Strict,
        Expires = DateTimeOffset.UtcNow.AddMinutes(30) // 与令牌有效期一致
    });
    
    return RedirectToPage("/Index");
}

Vue组件中读取Cookie #

// 封装Cookie读取方法
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// Vue组件中使用
async created() {
  this.apiSettings.idToken = getCookie('id_token');
}

⚠️ 注意：非HttpOnly Cookie存在XSS泄露风险，必须配合严格的XSS防护措施使用。

4. 注入Vue全局属性（适配多组件场景） #

如果多个Vue组件需要共享令牌，可在页面初始化时通过.NET将令牌注入Vue全局属性：

<script>
const app = Vue.createApp({})
// 全局注入令牌
app.config.globalProperties.$idToken = "@Model.IdentityToken"
app.mount('#app')
</script>

在组件中直接使用：

export default {
  methods: {
    async callApi() {
      const response = await fetch('/api/protected', {
        headers: {
          'Authorization': `Bearer ${this.$idToken}`
        }
      });
    }
  }
}

内容的提问来源于stack exchange，提问作者Wilko van der Veen