Vue 路由守卫实现访问权限控制 - 全面指南 - 常规

Vue 中可以使用路由守卫来控制页面的访问权限，通过在路由配置中添加 beforeEach、beforeResolve、afterEach 等钩子函数实现。具体步骤如下：

在 router/index.js 中引入 Vue 和 VueRouter，并使用 Vue.use(VueRouter) 安装 VueRouter 插件。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 路由配置
  ]
})

在路由配置中添加路由守卫，通过 beforeEach 函数判断用户是否有访问该页面的权限，如果没有则跳转到登录页面。

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (!token && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})

在组件中使用路由守卫，通过 beforeRouteEnter 函数在组件渲染之前判断用户是否有访问该组件的权限。

export default {
  beforeRouteEnter(to, from, next) {
    const token = localStorage.getItem('token')
    if (!token) {
      next('/login')
    } else {
      next()
    }
  },
  // 组件其他内容
}

以上是 Vue 中实现路由守卫的基本步骤。需要注意的是，路由守卫是通过钩子函数来实现的，因此在使用时需要熟悉各个钩子函数的执行时机和参数。