Vue-Router：如何使用存储令牌的HttpOnly Cookie设置受保护的路由？

问题描述

当前，我正在尝试使用vuejs创建受保护的路由。我读了很多有关导航卫士以及如何保护路线的文章。因此，我发现很多解决方案都可以与localStorage一起使用，这是我无法使用的，因为我的API使用的是存储令牌的HttpOnly cookie。因此，我当前的解决方案是在路由器的beforeEach挂钩中使用api调用检查会话，如下所示：

router.beforeEach((routeTo,routeFrom,next) => {
  checkSession().then(res => {
    if(routeTo.fullPath == Routes.LOGIN) {
      next(Routes.DASHBOARD)
    } else {
      next();
    }
  }).catch(err => {
    // This will be also trigerred from the interceptor which is bad!
    if (routeTo.matched.some((record) => record.meta.requiresAuth)) {
      next(Routes.LOGIN)
    } else {
      next()
    }
  });

});

使用此解决方案，我遇到了一个主要问题。我正在使用axios intercetoprs，当我收到401和403时，我正在尝试将用户重定向到登录页面。但是，当我在拦截器中调用路由器时，它将调用beforeEach挂钩。最终陷入无限循环。那么，如何使用HttpOnly Cookie设置来建立受保护的路由？我正在尝试很多，但是直到现在，我还没有找到一个行之有效的好的解决方案。目前，我最好的解决方案是不使用beforeEach钩子，因为执行请求的每个页面都会触发拦截器，如果未经授权，重定向器将重定向到登录名。

我的拦截器：

api.interceptors.response.use(
    (config) =>  {
        return config;
    },error => {
        const originalRequest = error.config; 

        if(error.response) {
            if(error.response.status === 429) {
                //do something
            } else if(error.response.status === 401) {
                return api.post("/auth/refresh").then(res => {               
                    return axios(originalRequest);
                }).catch(err => {
                    //Only push if we are not on login page otherwise we get NavigationDuplicated Error
                    if(router.currentRoute.fullPath != "/")
                        router.push("/")
                    return Promise.reject(err);
                })
    
            } else {
                return Promise.reject(error);
            }
        } else {
            return Promise.reject(error);
        }

    }
);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）