Vue-resource拦截器判断token失效跳转

最新推荐文章于 2025-06-19 16:26:08 发布

原创最新推荐文章于 2025-06-19 16:26:08 发布 · 6.8k 阅读

2 ·

CC 4.0 BY-SA版权

本文解决了你的问题吗？转载注明链接,帮助更多人。

文章标签：

#拦截器

大前端开发专栏收录该内容

157 篇文章

订阅专栏

本文介绍如何在Vue项目中实现全局的Token验证机制。通过在拦截器中设置Token判断，确保每次HTTP请求都进行Token有效性检查，并自定义了Token过期后的跳转行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在拦截器中设置全局的token判断，意味着每次http请求都会校验token，与后台约定好的token过期返回码可以自定义跳转路径；

var token = window.localStorage.getItem("token");
Vue.http.interceptors.push(function(request, next) {
    request.headers.set('token', token); //setting request.headers
    next(function(response){
        if(response.body.code===401){ //与后台约定登录失效的返回码
            parent.location.href ='/login.html';
        }
        return response
    })
})