vue路由守卫怎么实现

Vue 路由守卫是一种在路由跳转时执行的钩子函数，可以用来控制用户访问页面的权限、拦截未登录用户等。

Vue 路由守卫分为全局守卫和路由独享守卫，下面分别介绍它们的实现方法。

## 全局守卫

全局守卫是在整个应用中都会生效的路由守卫，可以通过 Vue Router 的 `beforeEach` 方法来实现。

// main.js
import router from './router'

router.beforeEach((to, from, next) => {
  // to: Route 即将要进入的目标路由对象
  // from: Route 当前导航正要离开的路由
  // next: Function 一定要调用该方法来 resolve 这个钩子。
  // 它可以传入参数用来指示路由跳转的行为

  // 判断用户是否登录
  const isLogin = sessionStorage.getItem('token') ? true : false

  if (to.path === '/login') {
    // 如果已经登录，重定向到主页
    isLogin ? next('/') : next()
  } else {
    // 如果没有登录，重定向到登录页
    isLogin ? next() : next('/login')
  }
})

上面代码中通过 `beforeEach` 方法注册了一个全局守卫，当用户每次进行路由跳转时，都会先执行该守卫，判断用户是否已登录，如果已登录，则继续访问目标路由；如果未登录，则自动跳转到登录页。

## 路由独享守卫

路由独享守卫是只针对某个路由生效的守卫，可以通过在路由配置中添加 `beforeEnter` 方法来实现。

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Login from './views/Login.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      beforeEnter: (to, from, next) => {
        // 判断用户是否登录
        const isLogin = sessionStorage.getItem('token') ? true : false

        if (isLogin) {
          next()
        } else {
          next('/login')
        }
      }
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})

export default router

上面代码中，我们在路由配置中为 `about` 路由添加了一个 `beforeEnter` 方法，该方法只会在用户访问 `about` 路由时执行，判断用户是否已登录，如果已登录，则继续访问 `about` 路由；如果未登录，则自动跳转到登录页。