如何通过Vue.js（Vue Router）与Django正确校验身份认证

是的，向Django后端发起校验请求是这种场景下的最优方案——因为只有服务器端才握有会话状态的最终决定权，前端存储的认证状态始终是“副本”，无法实时同步服务器的会话变更。

为什么前端存储不可靠 #

• 不管是localStorage还是vuex，存储的IsAuthenticated只是前端本地的状态快照，完全无法感知服务器端的会话变动：比如管理员强制失效用户session、session自动超时、用户在其他设备登出等情况，前端都会继续显示已认证状态，导致用户能访问受保护路由但实际已无权限。

后端校验接口实现（DRF） #

可以快速实现一个轻量接口，直接依托Django的session机制校验用户状态：

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def check_authentication(request):
    # 直接利用Django内置的用户认证状态
    return Response({'is_authenticated': request.user.is_authenticated})

这个接口会自动读取请求携带的sessionid cookie，判断当前会话是否有效，无需额外处理令牌逻辑。

Vue-Router中集成校验 #

在路由守卫中调用这个接口，确保进入受保护路由前做实时校验：

router.beforeEach(async (to, from, next) => {
    // 给需要保护的路由添加meta.requiresAuth标识
    if (to.meta.requiresAuth) {
        try {
            const res = await fetch('/api/auth/check/', {
                credentials: 'include' // 必须携带session cookie，否则后端无法识别会话
            });
            const data = await res.json();
            data.is_authenticated ? next() : next('/login');
        } catch (err) {
            // 请求失败（比如网络问题）默认跳登录页
            next('/login');
        }
    } else {
        next();
    }
});

优化建议 #

• 可以给前端状态加短期缓存：比如在vuex中存储带过期时间的认证状态，每次校验前先检查缓存是否过期，未过期则直接使用，过期再发起后端请求，减少不必要的接口调用。
• 缓存过期时长建议和后端session超时时间对齐，避免出现缓存状态和服务器状态不一致的情况。

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