Vue 路由守卫安全

关注公众号， 设置为  '星标' ，更多精彩内容，第一时间获取

---

路由守卫分类

全局路由守卫

//全局验证路由
const router = createRouter({
  history: createWebHashHistory(),
  routes
});

// 白名单， 不需要验证的路由
const whiteList = ['/','/register']

router.beforeEach((to,from,next)=>{
  if(whiteList.indexOf(to.path) === 0) {
    // 放行，进入下一个路由
    next()
  } else if(!(sessionStorage.getItem('token'))){
    next('/');     
  } else {
    next()
  }  
})

beforeEach

beforeResolve

afterEach

单个路由独享

beforeEnter

      {
        path:'/superior',
        component: Superior,
        meta:{
          icon:'el-icon-s-check',
          title:'上级文件'
        },
        beforeEnter:(to,form,next) =>{
          
        }
      }

组件路由守卫

beforeRouteEnter

beforeRouteUpdate

beforeRouteLeave

路由守卫执行的完整过程

React Hook | 必 学 的 9 个 钩子

Vue权限路由思考

Vue 组件通信的 8 种方式

MYSQL常用操作指令

TypeScript学习指南(有PDF小书+思维导图)

原创不易，素质三连

本文分享自微信公众号 - 前端自学社区（gh_ce69e7dba7b5）。
如有侵权，请联系 [e-mail] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。