vue怎么用全局导航守卫作登录后跳转到未登录前指定页面-创新互联
这篇文章主要讲解了vue怎么用全局导航守卫作登录后跳转到未登录前指定页面,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
创新互联建站-专业网站定制、快速模板网站建设、高性价比海盐网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式海盐网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖海盐地区。费用合理售后完善,十载实体公司更值得信赖。有这样一个场景:如果你在登录之前输入了http://localhost:8080/oauth3-mgm-app/#/userManage,想进入userManage页面,但是由于没有登录,系统是不会让你进入这个页面,之后会被定向到login页面。但是在登录之后,认为你有这个权限了,就需要重新定向到userManage页面。大致流程图如图1所示:
图1 登录后跳转到未登录前指定页面流程图
在vue-route的官方文档里其实有给到过这个demo,官方文档链接在此:https://router.vuejs.org/zh/guide/advanced/meta.html。但是不是很符合我们的需求,于是稍加改动,先上代码,搭配流程图可能更容易理解:
router.beforeEach((to, from, next) => { var asideMenuConfig = sessionStorage.getItem("asideMenuConfig"); // 验证当前路由所有的匹配中是否需要有登录验证的 if (to.matched.some(record => record.meta.requiresAuth)) { // 这里可以将cookie里是否存有token作为验证是否登录的条件 // 请根据自身业务需要修改 // 本段代码根据是否有权限菜单作为是否登录依据 if (asideMenuConfig) { //校验所跳路由是否在配置菜单中 if (asideMenuConfig.indexOf(to.path) != -1 || to.path == "/index" || to.path == "/login") { if(sessionStorage.getItem('redirect')!=null){ var redirect=sessionStorage.getItem('redirect'); if(to.path == redirect){//解决next()无限循环 next() }else{ next({ path: redirect }); } }else{ next(); } } else { next({ path: from.path }) } } else { sessionStorage.setItem('redirect', to.fullPath); next({ name: 'login' }) } } else { next(); } })
文章题目:vue怎么用全局导航守卫作登录后跳转到未登录前指定页面-创新互联
标题路径:http://pwwzsj.com/article/cosppc.html