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