1. 程式人生 > >vue 判斷是否登入,未登入跳轉到登入頁

vue 判斷是否登入,未登入跳轉到登入頁

網頁一進入判斷是否登入,未登入跳轉到登入頁面

router.js

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        title: '首頁',
        requiresAuth: true // 是否需要判斷是否登入
      }
    },
    {
      path: '/login',
      name: 'login',
      component: login,
      meta: {
        title: 'login'
      }
    }
  ]
})

main.js

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  // 判斷該路由是否需要登入許可權
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (to.name === 'login') {
      next()
    } else if (localStorage.getItem('token')) {
      // 訪問伺服器快取資料,判斷當前token是否失效
      Vue.http.get("http:xxxx/Login/UserIsLogin?token="+localStorage.getItem('token')+"&url="+to.name,{withCredentials: true}).then(response => response.json()).then(num => {
            // console.log('是否登入',num);
            if(num.code==1001){
             next();
            } else{
             alert('您的token已超時,請重新登入');
             next('/Login');
          }
       })
    } else {
      next('/Login')
    }
  } else {
    next()
  }
})