如何解决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 举报,一经查实,本站将立刻删除。