Vue登錄功能 - 路由導航守衛控制訪問權限

index.js頁面

const router = new Router({
  routes: [
    //當訪問根目錄時候，重定向至Login頁面
    {path:'/',redirect:'/login'},
    //登錄頁面
    {path: '/login', component: Login},
    //首頁
    {path:'/home',component:Home}
  ]
})

//掛載路由導航守衛
router.beforeEach((to,from,next)=>{
  //to 將要訪問的路徑
  //from 代表從那個路徑跳轉而來
  //next 是一個函數，放行
  //    next() 放行     next('/login) 強制跳轉

  //如果用戶訪問的是登錄頁面，則直接放行
  if(to.path === '/login'){
    next()
  }else{
    //從 sessionStorage 中獲取 保存的 token
    const tokenStr = window.sessionStorage.getItem('token')
    //如果沒有token，強制跳轉到登錄頁面，如果有，則直接放行
    if(!tokenStr){
      next('/login')
    }else{
      next()
    }
  }
})

export default router