Vue实际运用二：前后端配合-控制权限 addRoute()

GG·bond

已于 2022-01-21 14:52:13 修改

阅读量1k

点赞数 1

分类专栏： vue实际运用文章标签： vue权限控制

于 2021-12-21 18:11:23 首次发布

本文链接：https://blog.csdn.net/GTbond/article/details/122064927

版权

本文介绍了Vue应用中如何实现菜单权限控制，包括创建路由表（本地存储基础版）、动态添加和筛选权限路由。在router/index.js中，通过获取用户权限后动态添加可访问的路由，避免404页面。同时提到了新版本中addRoutes()已废弃，应使用addRoute()代替，并探讨了路由注入可能导致的安全问题。

摘要由CSDN通过智能技术生成

控制权限

菜单权限控制（菜单中的页面是否能被访问）
按键、请求等具体操作的权限控制

菜单的权限控制

需求：只显示当前用户能访问的权限内菜单，如果用户通过URL进行强制访问，则会直接进入404

基本流程：获取用户权限并存储——>根据用户权限选择性渲染菜单

1. 创建路由表(本地存储-基础版)

公共路由：登录、维护等页面写到默认的路由中
动态路由（权限控制）：需要权限的页面写到一个变量或者一个文件中
重定向路由：404一定要写在最后

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

//默认不需要权限的页面
const routes = [{
	//登录页
  {
    path:'/home',
    component:Home
  },
  //后台首页
  {
    path:'/',
    redirect: '/hove',
  }
},]
//动态路由(需要权限)
const dynamicRoutes = [
  {
    path:'/hove',
    component: ()=>import('../views/Hove.vue'),
    redirect: '/hove/person',
    children:[
      {
        path: 'person',
        name: 'Person',
        component: ()=>import('../views/Person.vue'),
        meta:{
          roles: ['超级管理员', '管理员'],
          fullPath: '/hove/person',
          title:'人类'
        }
      },
      {
        path: 'women',
        name: 'Women',
        component: