vue-router的訪問權限管理

路由守衛（路由鈎子、攔截器）

vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中：全局的, 單個路由獨享的, 或者組件級的。

可以不登錄直接進入系統，但是訪問指定位置需要登錄

只有一級目錄的情況下的攔截

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new Router({...});

# 需要登錄才能訪問/message路由,如果沒有登錄就調回到登錄頁面
router.beforeEach((to, from, next) => {
  let isLogin = false; // 默認沒有登錄
  if (!isLogin && to.path === '/message') {
    next('/login');
  } else {
    next();
  }
})

多級目錄情況下的攔截

router.beforeEach((to, from, next) => {
  let isLogin = false; // 默認沒有登錄
  let matched = to.matched.some((item) => {
    return item.path === '/message';
  })
  if (!isLogin && matched) {
    next('/login');
  } else {
    next();
  }
})

直接在路由中設置攔截

# 路由配置
{
  path: '/message',
  meta: {
    login_required: false
  },
  component: Message,
  children: [
    {
      path: 'infos',
      component: MessageInfos
    }
  ]
}

# 攔截器配置
# 在單個路由中使用攔截
router.beforeEach((to, from, next) => {
  let isLogin = false; // 默認沒有登錄
  let matched = to.matched.some((item) => {
    return item.meta.login_required;
  })
  if (!isLogin && matched) {
    next('/login');
  } else {
    next();
  }
})

必須先登錄才能進入系統

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new Router({...});

# 訪問系統需要先登錄
router.beforeEach((to, from, next) => {
  let isLogin = false; // 默認沒有登錄
  if (!isLogin && to.path !== '/login') {
    next('/login');
  } else {
    next();
  }
})

登錄成功以后，不能訪問登錄、注冊、找回密碼頁面

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new Router({...});

# 登錄成功以后，不能訪問登錄、注冊、找回密碼頁面
router.beforeEach((to, from, next) => {
  let isLogin = true; // 登錄成功
  if (!isLogin && to.path !== '/login') {
    next('/login');
  } else {
    if(to.path === '/login'){
      next('/');
    } else {
      next();
    }
  }
})