首先登录那权限表

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. Ajax与select标签的组合运用

    ---------------------------------------------------------------------------------------------------- ...

  2. jgGrid

    jqGrid的表格加载 function GetGrid() { var selectedRowIndex = 0; var $gridTable = $("#gridTable" ...

  3. Signing Your Applications(Android签名相关)

    In this document Signing Overview Signing in Debug Mode Signing in Release Mode Signing Android Wear ...

  4. MVC 中Controller返回值类型ActionResult

    下面列举Asp.net MVC中Controller中的ActionResult返回类型 1.返回ViewResult视图结果,将视图呈现给网页 public ActionResult About() ...

  5. CSS 规范 命名规则

    http://nec.netease.com/standard/css-practice.html

  6. Java NIO Path

    Java NIO Path Creating a Path Instance Creating an Absolute Path Creating a Relative Path Path.norma ...

  7. vue路由传参

    console.log( _this.$route.params.id)接收参数 <div class="baoming"><router-link :to=&q ...

  8. grabcut 分割 Rect

    #include "opencv2/opencv.hpp" using namespace cv; void main() { Mat src = imread("E:\ ...

  9. mysql 在登陆的时候出现error 1045 (28000): 错误解决办法

    错误显示:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES) 解决方案: 1.找到配 ...

  10. js中基本事件的总结,onclick、onblur、onchange等

    js中的基本事件总结: 特定的场景下发生的一个动作:事件:事件=函数(),事件发生会触发函数执行. 属性 当以下情况发生时,出现此事件 FF N IE onabort 图像加载被中断 1 3 4 on ...