Vue中实现权限控制有哪些基于路由验证的具体方法？

本文共计1677个文字，预计阅读时间需要7分钟。

下面介绍两种权限控制的方法：

1. 路由元信息（meta）

2.动态加载路由和路由元信息（meta）

如果一个网站有不同的角色，如管理员和普通用户，要实现不同角色访问不同页面，可以使用路由元信息来控制。

下面介绍两种权限控制的方法：

• 路由元信息(meta)
• 动态加载菜单和路由(addRoutes)
  

路由元信息(meta)

如果一个网站有不同的角色，比如管理员 和普通用户 ，要求不同的角色能访问的页面是不一样的

这个时候我们就可以把所有的页面都放在路由表里 ，只要在访问的时候判断一下角色权限 。如果有权限就让访问，没有权限的话就拒绝访问，跳转到404页面

vue-router 在构建路由时提供了元信息meta 配置接口，我们可以在元信息中添加路由对应的权限，然后在路由守卫中检查相关权限，控制其路由跳转。

可以在每一个路由的meta 属性里，将能访问该路由的角色添加到roles 里。用户每次登陆后，将用户的角色返回。然后在访问页面时，把路由的meta 属性和用户的角色进行对比，如果用户的角色在路由的roles 里，那就是能访问，如果不在就拒绝访问。