首先登录那权限表

router.beforeEach((to, from, next) => {
if(to.path === '/login') {
next();
}else{
if(!store.getters.token){
..........此处省略
}else{
if(checkRoutePermission(to,store.getters.permission){
//登录的时候拿到permission(权限表)
next();
}else {
            next('/error/502');//没有权限被输入权限路由跳错误页面
          }
           }
}) //回调函数

function checkRoutePermission(to,permissionList){

let isValidate=true;

to.matched.some(routeItem=>{

//全遍历路由记录的元字段

if(routeItem.meta.permissionPath){

isValidate=checkPermission(permissionList,routeItem.meta.permissionPath)!==null;

}

});

return isValidate;

}

//过滤权限的函数

export function checkPermission(permissionList,permissionPath){
let target=null;
permissionList.forEach(permissionItem=>{
if(permissionItem.path===permissionPath){
target=permissionItem;
return false;
}else{
if(permissionItem.children && permissionItem.children.length!==0){
target=checkPermission(permissionItem.children, permissionPath);
return target===null;
        }
}
})
return target;
}

vue路由权限之访问权限(meta控制是否有访问权限)的更多相关文章

  1. Vue 路由拦截(对某些页面需要登陆才能访问)

    前言 做项目的时候有个需求,就是发现没有登录,竟然也可以进入我的主页,这样肯定是不能容忍的.于是就要让他进入主页的时候,加个判断是否有登录,若没有登录,则返回登录界面,登录成功后还可以跳转到之前进入的 ...

  2. Vue 路由(对路由页面编写做规范)

    前言 上一篇写了“Vue 路由拦截(对某些页面需要登陆才能访问)” 的博客,此篇是续上篇对路由页面模块化,可以看到之前的路由配置都写在main.js中,真正开发肯定不能都写在main.js,所以我们要 ...

  3. Vue + Element UI 实现权限管理系统 前端篇(十三):页面权限控制

    权限控制方案 既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦. 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作 ...

  4. 循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制

    在一个业务管理系统中,如果我们需要实现权限控制功能,我们需要定义好对应的权限功能点,然后在界面中对界面元素的功能点进行绑定,这样就可以在后台动态分配权限进行动态控制了,一般来说,权限功能点是针对角色进 ...

  5. Spring Cloud实战: 基于Spring Cloud Gateway + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

    一. 前言 信我的哈,明天过年. 这应该是农历年前的关于开源项目 的最后一篇文章了. 有来商城 是基于 Spring Cloud OAuth2 + Spring Cloud Gateway + JWT ...

  6. vue路由守卫用于登录验证权限拦截

    vue路由守卫用于登录验证权限拦截 vue路由守卫 - 全局(router.beforeEach((to, from, next) =>来判断登录和路由跳转状态) 主要方法: to:进入到哪个路 ...

  7. vue路由守卫配合权限,白名单

    router.beforeEach(async(to, from, next) => { // 进度条开始 NProgress.start() // 确认用户是否已登录(获取它的token值,这 ...

  8. 控制用户的访问之权限、角色【weber出品必属精品】

    权限的作用 限制用户对数据的访问 权限的分类 1. 系统权限:能够存取数据库的权限 2. 对象权限:操作数据库对象的内容 系统权限  1.1 如何创建用户: SQL> create user t ...

  9. Web应用程序系统的多用户权限控制设计及实现-权限模块【10】

    前五章均是从整体上讲述了Web应用程序的多用户权限控制实现流程,本章讲述Web权限管理系统的权限配置模块.页面模块涉及到的数据表为权限表.权限配置模块是按照用户组和页面,栏目结合组成的.通过配置一个用 ...

随机推荐

  1. [ SHELL编程 ] 自动删除操作系统用户

    Linux中经常需要删除用户,通常手工操作执行userdel操作即可,如果删除失败出现错误提示按照提示错误进行操作即可.如果是脚本需要调用删除用户操作呢?利用如下实例中drop_user删除用户函数, ...

  2. shell字符串基本操作

    shell脚本中一切变量皆字符串,所以必须掌握字符串的常用处理方法.比如获取字符串长度.获取字符串指定位置字符.替换字符串中的指定字符或者删除某些字符等操作. 1.字符串操作列表 (1)var=val ...

  3. vscode 不显示指定后缀名pyc文件

    不显示python生成的pyc文件 不显示java eclipse编辑器生成的.metadata生成的文件夹 py文件执行后会生成.pyc文件,会影响侧边栏的使用,可以通过如下设置隐藏.pyc等中间文 ...

  4. Android EventBus3.x 使用详解

    ♪(^∇^*) 五一假期在家无事,新项目中用的是RxJava2+EventBus感觉还不错,趁这闲暇总结下EventBus. 一.概要简述 EventBus是一个基于观察者模式的Android事件发布 ...

  5. easyUi 表头排序按钮 bug

    参考文章:https://www.shiqidu.com/p/81

  6. 学JS的心路历程-物件与原型(一)

    前两天说明面向对象的三大特性及JS不符合面向对象,只能称作支持面向对象而已,今天我们来看看JS的原型继承. 首先我们先来看,什么是原型(vmwork): 两个物件之间的原型关系(prototype r ...

  7. js高级-递归调用

    函数调用自身 求1-100的和 var sum = 0; for(var i = 1; i<=100; i++){ sum += i } console.log(sum) //自己写的递归 va ...

  8. SSM的例子-参考

    ssm的例子:http://blog.csdn.net/double030/article/details/63683613

  9. CSS3 Backgrounds相关介绍

    CSS3 Backgrounds相关介绍 1.背景图片(background images)是在padding-box的左上角落脚安家的,我们可以使用background-position属性改变默认 ...

  10. eclipse中没有tomcat小猫

    安装了tomcat,按网上的说明也使用了tomcatPluginV331 配置文件,还是没有小猫,后来我发现,网上的tomcatPluginV331 针对eclipse 4.4版本,所以应该是插件的版 ...