千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础

第86集笔记 （课堂笔记及相关权限验证的方法）

路由守卫：

beforeRouterEnter 验证前调用

beforeRouteUpdate 被复用时调用

beforeRouteLeave 离开路由时调用

从路由守卫中可以拓展出利用路由守卫实现登录权限验证等。

由此可以拓展出其他的权限验证方法，包括菜单权限，按钮权限

如：

1.在路由配置中添加meta字段，用于存储路由的访问权限等信息。

const routes = [

{path: '/user',

component: User,

meta: {

requiredAuth: true

} } ]

2.在全局路由守卫中检查用户的访问权限。

全局路由守卫里，每次路由跳转都要做判断

优点：

• 权限验证逻辑集中在守卫中,便于维护
• 可以按需为不同路由设置不同的访问权限

这种方式的缺点：

菜单需要与路由做一一对应，前端添加了新功能，需要通过菜单管理功能添加新的菜单，如果菜单配置的不对会导致应用不能正常使用

3.在菜单组件中根据用户的访问权限来生成菜单。(自定义方法和v-if指令)

4.权限校验mixin

例子:const permissionMixin = {

 mounted() {

  if (!hasPermission(this.permission)) {

   this.$el.parentNode.removeChild(this.$el)

  } 

 }

}

封装一个mixin,在mounted钩子中进行权限校验,如果没有权限则移除DOM元素:

5.后端控制

在后端接口中已经进行过权限控制,前端组件直接根据后端返回的信息进行展示。

其实最简单的验证就是利用v-if指令

<button v-if="hasPermission('delete')">删除</button>

这样即可。

设置权限的目的：确保我们所开发的程序的安全性和稳定性