vue的路由守卫与axios的请求拦截_vue路由守卫和axios拦截器-优快云博客

本文链接：https://blog.youkuaiyun.com/wytraining/article/details/119248518

本文介绍了如何使用Vue的路由守卫进行页面访问权限的前端判断，以及通过Axios的响应拦截器在每次请求前检查本地token，并在接收到401或403状态码时进行相应处理，确保登录状态的有效性。

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

路由守卫

进入某些页面时，判断用户是否登录过
如果登录过，进行跳转，否则重定向到登录页（路由守卫只是前端做判断，检查请求头中是否含有token，但是并不能判断token是否失效）

beforeRouteEnter(to: Route, from: Route, next: Function) {
    axios
        .get("epcode/app/getCurrentUser")
        .then(res => {
            //一般为获取用户信息，error则未登录
            if (res.status === 200) {
                store.commit("getUserInfo", res.data);
                next(true);
            } else {
                next(false);
            }
        })
        .catch(err => {
            next(false);
        });
}

axios响应拦截器

每次发送请求之前，判断本地缓存中是否存在token
如果存在，则统一在http请求的header中加上token，这样后台就能根据token判断登录情况（因为即使本地存在token，也有可能是过期的，所以在响应拦截器中对返回状态进行判断）
如果返回的是401 / 403，则重新跳入登录页中

let token = localStorage.getItem('token');
axios.defaults.headers.common['refresh-token'] = token;  //http请求中加入token值

// http response 服务器响应拦截器，这里拦截401错误，并重新跳入登页
axios.interceptors.response.use(response => {
    return response;
}, error => {
    if (error.response) {
        switch (error.response.status) {
            case 401:
                router.replace({
                    path: '/login',
                });
                break;
            case 403:
                router.replace({
                    path: '/login',
                });
                break;
            default:
                try {
                    if (error.response.request.responseURL.includes('authox/curUser')) {
                        router.replace({
                            path: '/login',
                        });
                    }
                } catch (e) {
                    console.log(e)
                }
        }
    }
    return Promise.reject(error.response)
});

vue的路由守卫与axios的请求拦截
 前端（vue）登录权限验证