手把手前端入门笔记之vue-element-admin-02

前言：

本文主要为vue-element-admin框架的入门教程，本人2年后端开发经验，想自学前端转全栈工程师（听着就好酷），直接上手实战应该是入门前端最快的方式了，在此记录下学习过程，希望可以对初学者有所帮助。如有错误或未考虑完全的地方，望不吝赐教。

第一期 手把手前端入门笔记之vue-element-admin-01

第二期 手把手前端入门笔记之vue-element-admin-02

第三期 手把手前端入门笔记之vue-element-admin-03

第四期 手把手前端入门笔记之vue-element-admin-04

环境（配置）：win11操作系统，vs code编辑器

内容大纲：登入用户权限，侧边栏菜单改为后端控制（主要提供解决问题思路）

具体步骤

根据官方文档，全局钩子router.beforeEach中拦截路由

登入后浏览器会在本地 cookie 存储token，所以这里做的策略就是页面会先从 cookie 中查看是否存有 token，如果不存在就会回到登入页面重新登录，如果有token，就会把这个 token 返给后端去拉取user_info（第一篇笔记中自己创建的获取用户信息接口，可以自定义用户的参数），来保证每次显示的用户信息是最新的

权限控制

权限控制属于系统设计的一部分，常见于几乎所有 ToB 的系统内。尤其是一些传统的层级很多的企业内，权限控制非常重要。如：页面、链接、接口、数据根据公司里不同的岗位，工种，职级可见的内容范围应该是不同的。

（纯前端可以跳过这部分）已我所开发的后端系统数据表设计为例：

第一张表菜单表，这张表由子菜单存储父菜单id，由后端控制菜单权限，根据前端给出的role_id返回对应的菜单。

​第二张表是角色表，角色和菜单是多对多的关系。角色和用户是一对多的关系。现在有些权限控制角色和用户是多对多的关系。

​第三张表是用户表。我实际上是给角色分配权限。而用户又属于角色。所以用户可以根据role_id，进行登录后得到不同的菜单列表。

​然后我们回到项目，找到菜单路由表，vue-element-admin默认是由前端控制路由表

​通过meta标签来标示改页面能访问的权限有哪些，如meta: { role: ['admin'] }表示该页面只有admin才能进入。

侧边栏

页面布局一般都在layout文件夹内

​可以看到Navbar（导航栏），RightPanel（右侧面板），Sidebar（侧边栏），TagsView（标签视图）都能在这里找到，我们主要看要修改的侧边栏，（CTRL+鼠标左键）跳转

import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'

继续找到./components文件

继续找到该位置

侧边栏的路径是遍历这个permission_routes数据得到的，我们继续找这个数据从哪里获取

​再去store里面找这个方法

继续找他的上层

终于！真相大白了，最后找到的就是这个地方给accessedRoutes赋值了

其中asyncRoutes就是所有侧边栏菜单的数据，roles就是登入用户的类型，总体原理就是根据用户类型，返回该用户权限可见的菜单，那么我们这里在这里测试一下，从router/index.js文件中随便复制一个菜单过来

修改好后打开页面

所以侧边栏就是此处修改的，我们把他其换成我们后端获取菜单列表的接口

获取菜单api

element-admin框架默认为前端控制侧边栏，并不是绝对安全，后端还是需要二次验证，所以直接修改成后端控制，首先添加自己的后端接口路由，对返回的数据进行统一格式（如果按照框架格式写的后端接口可跳过）

然后把数据的格式与原先的对齐，以下是我的接口返回的信息

{ "code": 0, "msg": "success", "data": [ { "path": "/staff", "icon": "icon-staff", "name": "员工管理", "id": 3, "children_ids": [ 15, 16 ], "children": [ { "id": 15, "path": "/staff/list", "name": "员工列表" }, { "id": 16, "path": "/staff/add", "name": "员工添加" } ] } ] }

自己写的写的直接与框架使用格式一致即可，我是基于已有的后端服务进行搭建，所以要简化成以下格式

{ path: '/staff', component: Layout, meta: { title: '员工管理', icon: 'table' }, children: [ { path: 'list', meta: { title: '员工列表' } }, { path: 'add', meta: { title: '员工添加' } } ] }

可以全局搜索获取菜单这个函数什么时候被调用

在这里原本传参是路由表和roles字段，现在都用不到了，在这一步之前加上我们获取菜单的请求，然后把返回的menu数据加进去

​把之前侧边栏菜单处理的代码可以删除，直接把后端返回的数据赋值就好了（直接丢给后面两部也可以，为了清楚一点所以保留了他命名的字段）

从新登入网页，发现已经成功了，报错信息为原页面数据请求，可忽略，我们只需要完成新增的菜单即可

侧边栏绑定页面

侧边栏点击员工列表后是空白页面，如何绑定上页面呢

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

找到框架原先的侧边栏路由表，可以发现每个路径都绑定了view下的页面

根据这个路径我们可以找到具体对应的页面

​所以同理，我们先在views文件夹下创建我们想要存放员工管理相关页面的文件夹，因为我员工管理菜单的路径为 "/staff/list"（员工列表）与 "/staff/add" （员工添加），所以为了方便，对应两个页面就写作list.vue与add.vue,如图所示：

现在文件是空的，我们可以先去把404页面的代码复制进去试试

现在要去侧边栏里面绑定对应的页面，我们侧边栏菜单是由后端接口返回的，需要做一个路由与页面的映射

​保存再次打开页面，已经可以看到我们粘贴的404页面了

​

常见错误

1.不清楚自己的接口是否被调用，打开网页右键点检查（审查元素或者F12快捷键），能看到是发出的请求及相应

2.登入后页面空白或404，应该是配置默认登入后跳转的路径没有对应的页面，可以把默认菜单部分注释掉（下文代码块中部分），修改成这样子，（左上角应该是要放一个返回主页的系统名称的，以后再修改）

// 以下部分可以注释掉，为页面侧边栏默认都会显示的菜单

{ path: '/', component: Layout, redirect: '/table/complex-table', children: [ { path: 'dashboard', component: () => import('@/views/dashboard/index'), name: 'Dashboard', meta: { title: 'Dashboard', icon: 'dashboard', affix: true } } ] } { path: '/documentation', component: Layout, children: [ { path: 'index', component: () => import('@/views/documentation/index'), name: 'Documentation', meta: { title: 'Documentation', icon: 'documentation', affix: true } } ] }, { path: '/guide', component: Layout, redirect: '/guide/index', children: [ { path: 'index', component: () => import('@/views/guide/index'), name: 'Guide', meta: { title: 'Guide', icon: 'guide', noCache: true } } ] }, { path: '/profile', component: Layout, redirect: '/profile/index', hidden: true, children: [ { path: 'index', component: () => import('@/views/profile/index'), name: 'Profile', meta: { title: 'Profile', icon: 'user', noCache: true } } ] }

本文主要提供修改使用框架解决问题思路，因为前端了解程度不深，很多处并没有很规范，有什么错误欢饮指出。