Vue前端未登錄攔截功能實現

• Vue前端登錄攔截器

用戶在未登錄的情況下 只能訪問我們允許訪問的界面 其余界面無法訪問實現方法

在main.js文件中使用beforeEach方法實現


import router from './router'

// 這個鈎子函數 每一次路由跳轉都會經過這個鈎子函數  登錄攔截頁面
router.beforeEach((to, from, next) => {
 const WriteName = ['Register']
 let cookie = document.cookie
 console.log(document.cookie.split("login_user=").length, )
 console.log(to.name)

 if (to.path === '/logout') {
   // 清除session
   window.sessionStorage.clear()
   // 跳轉登錄頁
   next('/login')
 } else if (to.path === '/login') {

   if (document.cookie.split("login_user=").length > 1) {next('/project')}
 } else if (WriteName.indexOf(to.name) >= 0) {
   next()
 }
  else if (document.cookie.split("login_user=").length <= 1) {
   next('/login')
 }
 next()
})

這完全就是一個前端中間件middleware