Vue.js前端结合ASP.NET Web API的HTTPOnly JWT Token认证状态校验

下面是几个兼顾安全性和可用性的实践方案，适配你的ASP.NET Web API + Vue.js技术栈：

1. 后端提供专属认证状态校验接口 #

这是最可靠的方案，核心思路是通过后端验证HTTPOnly Cookie中的JWT有效性，前端仅需发起一个无副作用的请求获取状态。

后端实现（ASP.NET Web API） #

添加一个返回用户认证状态的接口，利用框架自带的认证中间件自动校验JWT：

[HttpGet("api/auth/check-status")]
[Authorize] // 自动校验Cookie中的JWT
public IActionResult CheckAuthStatus()
{
    // 可选：从Claims中提取用户基础信息返回给前端
    var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
    var userName = User.FindFirstValue(ClaimTypes.Name);
    
    return Ok(new {
        IsAuthenticated = true,
        UserId = userId,
        UserName = userName
    });
}

如果JWT无效/过期，ASP.NET会自动返回401 Unauthorized。

前端实现（Vue.js） #

• 应用初始化时调用接口，将状态存入状态管理工具（如Pinia/Vuex）：

// main.js
import { createApp } from 'vue'
import pinia from './stores'
import axios from 'axios'
import App from './App.vue'

async function initAuth() {
  try {
    const res = await axios.get('/api/auth/check-status')
    pinia.useAuthStore().setAuthStatus(res.data)
  } catch (err) {
    // 401说明未认证，清空本地状态
    pinia.useAuthStore().clearAuthStatus()
  }
}

const app = createApp(App)
initAuth().then(() => {
  app.use(pinia).mount('#app')
})

• 在路由守卫中拦截需要认证的路由：

// router/index.js
router.beforeEach(async (to, from, next) => {
  const requiresAuth = to.matched.some(item => item.meta.requiresAuth)
  const authStore = pinia.useAuthStore()

  if (requiresAuth && !authStore.isAuthenticated) {
    try {
      const res = await axios.get('/api/auth/check-status')
      authStore.setAuthStatus(res.data)
      next()
    } catch (err) {
      next('/login')
    }
  } else {
    next()
  }
})

2. 利用API响应拦截器做被动校验 #

前端所有业务请求通过axios封装，统一拦截401响应码，以此感知认证失效，自动跳转登录页并清空本地状态。

前端实现 #

// utils/axios.js
import axios from 'axios'
import pinia from '../stores'
import router from '../router'

const api = axios.create({ baseURL: '/api' })

api.interceptors.response.use(
  res => res,
  err => {
    if (err.response?.status === 401) {
      // 认证失效，清空状态并跳转登录
      pinia.useAuthStore().clearAuthStatus()
      router.push('/login')
    }
    return Promise.reject(err)
  }
)

export default api

这种方案无需额外校验请求，仅在用户发起业务操作时被动感知状态，适合对实时性要求不高的场景。

3. 前端本地存储非敏感状态标记（辅助优化） #

登录成功后，前端可在sessionStorage中存储一个非敏感的认证标记（如isAuthenticated: true）和JWT过期时间，但必须明确：这个标记仅做体验优化，最终状态以后端校验为准。

实现示例 #

// 登录接口调用成功后
async function login(credentials) {
  const res = await api.post('/api/auth/login', credentials)
  // 存储非敏感标记和过期时间
  sessionStorage.setItem('isAuthenticated', 'true')
  sessionStorage.setItem('authExpires', res.data.expiresAt)
  pinia.useAuthStore().setAuthStatus(res.data)
}

// 路由守卫中优先检查本地标记，兜底调用后端校验
router.beforeEach(async (to, from, next) => {
  const requiresAuth = to.matched.some(item => item.meta.requiresAuth)
  const localAuth = sessionStorage.getItem('isAuthenticated') === 'true'
  const isExpired = Date.now() > parseInt(sessionStorage.getItem('authExpires') || 0)

  if (requiresAuth) {
    if (!localAuth || isExpired) {
      try {
        const res = await api.get('/api/auth/check-status')
        sessionStorage.setItem('isAuthenticated', 'true')
        sessionStorage.setItem('authExpires', res.data.expiresAt)
        pinia.useAuthStore().setAuthStatus(res.data)
        next()
      } catch (err) {
        sessionStorage.removeItem('isAuthenticated')
        sessionStorage.removeItem('authExpires')
        next('/login')
      }
    } else {
      next()
    }
  } else {
    next()
  }
})

该方案减少了不必要的后端请求，但需注意：若用户手动清除Cookie或JWT过期，本地标记会与实际状态不一致，关键流程必须再次校验后端状态。

关键注意事项 #

• 所有权限判断逻辑必须以后端校验结果为准，前端状态仅做体验优化，不能替代后端权限验证。
• 确保ASP.NET Web API的CORS配置正确，开启AllowCredentials = true并指定允许的Origin，否则Cookie无法跨域携带。
• 若使用Refresh Token，同样要存储在HTTPOnly Cookie中，由后端负责自动刷新Access Token，前端无需干预。

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