如何使用jQuery Ajax调用MVC 5 Web API 2的刷新令牌接口

看起来你已经搭好了Refresh Token的基础配置（通过SimpleRefreshTokenProvider），接下来只需要调整你的jQuery代码，就能实现Access Token过期后自动用Refresh Token获取新令牌的逻辑。我帮你一步步梳理：

1. 首次登录时存储Refresh Token #

你现有的登录Ajax只保存了access_token，但要实现令牌刷新，必须同时存储接口返回的refresh_token。修改登录请求的success回调：

$.ajax({ 
    url: '/token', 
    method: 'POST', 
    contentType:'application/json', 
    data: JSON.stringify({ // 重要：因为contentType设为json，必须把对象转成JSON字符串
        username: $('#txtUserName').val(), 
        password: $('#txtPassword').val(), 
        grant_type:'password' 
    }), 
    success: function (response) { 
        sessionStorage.setItem('accessToken', response.access_token); 
        sessionStorage.setItem('refreshToken', response.refresh_token); // 新增存储Refresh Token
        window.location.href = 'Data.html'; 
    },
    error: function(xhr) {
        // 处理登录失败场景，比如提示用户名密码错误
        alert('登录失败：' + xhr.responseText);
    }
 });

2. 封装刷新令牌的专用函数 #

写一个独立函数，用来调用/Token接口获取新的Access Token：

function refreshAccessToken() {
    var refreshToken = sessionStorage.getItem('refreshToken');
    if (!refreshToken) {
        // 没有Refresh Token，直接跳回登录页
        window.location.href = 'Login.html';
        return;
    }

    return $.ajax({
        url: '/token',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            grant_type: 'refresh_token', // 注意这里grant_type是refresh_token
            refresh_token: refreshToken
        })
    }).done(function(response) {
        // 更新存储的Access Token，部分实现会返回新的Refresh Token，也一起更新
        sessionStorage.setItem('accessToken', response.access_token);
        if (response.refresh_token) {
            sessionStorage.setItem('refreshToken', response.refresh_token);
        }
    }).fail(function(xhr) {
        // Refresh Token也过期/无效了，清空存储并跳回登录
        sessionStorage.clear();
        window.location.href = 'Login.html';
    });
}

3. 封装API请求，自动处理令牌过期 #

你可以把所有后端API请求都封装到一个函数里，当请求返回401（未授权）时，自动触发令牌刷新，然后重试原请求：

function callApi(url, method, data) {
    var accessToken = sessionStorage.getItem('accessToken');
    var requestConfig = {
        url: url,
        method: method,
        headers: {
            'Authorization': 'Bearer ' + accessToken // 携带Access Token
        }
    };
    if (data) {
        requestConfig.contentType = 'application/json';
        requestConfig.data = JSON.stringify(data);
    }

    return $.ajax(requestConfig).fail(function(xhr) {
        if (xhr.status === 401) {
            // Access Token过期，先刷新令牌再重试原请求
            return refreshAccessToken().then(function() {
                requestConfig.headers['Authorization'] = 'Bearer ' + sessionStorage.getItem('accessToken');
                return $.ajax(requestConfig);
            });
        }
        // 其他错误直接抛出，交给调用方处理
        throw xhr;
    });
}

后续调用API时就用这个封装函数，比如：

callApi('/api/YourData', 'GET')
    .done(function(data) {
        // 处理返回的业务数据
        console.log(data);
    })
    .fail(function(xhr) {
        alert('请求失败：' + xhr.responseText);
    });

额外注意事项 #

• 确保你的SimpleRefreshTokenProvider实现正确，能够生成、存储和验证Refresh Token，并且在刷新时能返回有效的新Access Token。
• 生产环境务必将AllowInsecureHttp设置为false，避免明文传输令牌带来的安全风险。
• 给Refresh Token设置合理的过期时间，平衡安全性和用户体验（比如设为7天）。

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