vue的路由权限控制,如何从后台获取数据呀

更新日期: 2021-08-11阅读: 1.5k标签: 路由

路由权限控制常用于后台管理系统中,对不同业务人员能够访问的页面进行一个权限的限制, 对于无权限的页面可以跳转404页面或者提示无权限。

方式一:路由元信息(meta)

把所有页面都放在路由表中,只需要在访问的时候判断一下角色权限即可。 vue-router 在构建路由时提供了元信息 meta 配置接口,我们可以在元信息中添加路由对应的权限,然后在路由守卫中检查相关权限,控制其路由跳转。

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

示例一:通过roles判断

const myRouter = new VueRouter({    
    routes: [{      
    path: '/login',        
    name: 'login',        
    meta: {            
    roles: ['admin', 'user']        },        
    component: () => import('@/components/Login')    },
    {        
    path: '/home',       
    name: 'home',        
    meta: {            
    roles: ['admin']        },        
    component: () => import('@/views/Home')    },
    {       
    path: '/404',        
    component: () => import('@/components/404')      
    }]})
    //假设通过接口从后台获取的用户角色,可以存储在token中const role = 'user'myRouter.beforeEach((to,from,next)=>{    
    if(to.meta.roles.includes(role)){        
    next()    //放行    
    }else{        
    next({path:"/404"})    //跳到404页面    
    }})

示例二:在需要加权限的meta中加标识

const myRouter = new VueRouter({    
    routes: [{        
    path: '/login',        
    name: 'login',        
    meta: {            
        title: '登录页'            
        icon: 'login'        },        
        component: () => import('@/components/Login')    },
    {        
    path: '/home',        
    name: 'home',       
    meta: {            
    title: '首页'           
    icon: 'home',           
    requireAuth: true        },        
    component: () => import('@/views/Home')    },
    {        
    path: '/404',       
             component: () => import('@/components/404')     }]})myRouter.beforeEach((to,from,next)=>{    
    let flag = to.matched.some(record=>record.meta.requireAuth);    

    if(flag){        
    next()    }else{       
    next({path:"/404"})   
    }})

方式二:动态生成路由表(addRoutes)

根据用户权限或者是用户属性去动态的添加菜单和路由表,可以实现对用户的功能进行定制。 vue-router 提供了 addRoutes() 方法,可以动态注册路由,需要注意的是,动态添加路由是在路由表中 push 路由,由于路由是按顺序匹配的,因此需要将诸如404页面这样的路由放在动态添加的最后。

这里使用matched循环查找不直接使用to.meta的原因:
当存在子路由的情况时,首先明确按正常点击逻辑来说是先走一级路由再进二级路由的,对于权限的判断也必然是这样 //to.meta => 会直接搜索子路由的meta,如果一级路由没有添加requireAuth:true, 则在一级路由页面也本就应该被拦截无法进入二级路由页面了;如果用户直接篡改url地址栏的话,则可以进入二级页面,权限可能会出现问题。则应该给该权限下面的路由都添加标记 //to.matched => matched是一个路由数组,会将所有路由包括子路由的属性集合起来,所以通过循环判断查找的方式,只需要给一级路由添加权限标识即可权限他下面的其他子路由。

// store.js
// 将需要动态注册的路由提取到vuex中
const dynamicRoutes = [  {    
    path: '/manage',    
    name: 'Manage',    
    meta: {      requireAuth: true    },    
    component: () => import('./views/Manage')  }, 
    {    path: '/userCenter',    
    name: 'UserCenter',    
    meta: {      requireAuth: true    },   
    component: () => import('./views/UserCenter')  }]

在 vuex 中添加 userRoutes 数组用于存储用户的定制菜单。在 setUserInfo 中根据后端返回的菜单生成用户的路由表。

// store.jssetUserInfo (state, userInfo) {  
    state.userInfo = userInfo  state.auth = true 
    // 获取到用户信息的同时将auth标记为true,当然也可以直接判断userInfo  
    // 生成用户路由表  
    state.userRoutes = dynamicRoutes.filter(route => {    
        return userInfo.menus.some(menu => 
        menu.name === route.name)  
    }) 
    router.addRoutes(state.userRoutes) // 注册路由

修改菜单渲染

// App.vue
<div id="nav">      
    <router-link to="/">主页</router-link>      
    <router-link to="/login">登录</router-link>      
    <template v-for="(menu, index) of $store.state.userInfo.menus">        
    <router-link :to="{ name: menu.name }" :key="index">{{menu.title}}</router-link>      
   </template>
 </div>

你学废了么?

作者:狸不开
链接:https://juejin.cn/post/6994979622060294151
来源:掘金

链接: https://fly63.com/article/detial/10628

vue路由history模式_如何去除vue项目中的#

在使用vue-cli搭建的环境中,浏览器上URL地址中是存在#的,这是由于vue-router 默认 hash 模式,不难发现#的出现真的很丑陋。官网给出了如何使用history模式mode: history

vue路由传参主要的3种方式

vue中路由传参主要的3种方式:query方式(push时使用path来匹配)、params模式(push时使用name来匹配)、location预声明参数模式(push使用path来匹配,但是它跟params模式不同)

vue动态加载路由_实现vue动态加载路由器设置

我们的通用的后台管理系统中,我们会根据权限的粗细不同,会对每个角色每个权限每个资源进行控制。同样的我们也需要实现一个这样的功能。 这篇文章我将主要讲vue端的实现,关于后台接口我就不会涉及,当我接触的时候我们的后台接口是springcloud实现。

两种前端路由的实现方式

前后端分离开发模式,后端会把路由控制丢在前端,这几天再开发单页面小的项目,手动撸了个路由。前端路由实现有两种方法。HTML5 History API包括2个方法:history.pushState()和history.replaceState(),和1个事件:window.onpopstate。hash + location.onhashchange

vue动态路由_vue-router通过接口请求动态生成路由的实现

在后台管理系统中,一般都会采用权限管理。路由菜单数据都会保存到数据库中,在vue-router 2.2版本新增了一个router.addRoutes(routes)方法,即可用它来实现动态路由了

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

vue router 路由鉴权(非动态路由)

原本想用动态路由的思路去做,按权限加载对应路由表,但是由于权限可以交叉(比如一个人可以同时是主题管理员和数据服务管理员),导致权限路由表还是得去做判断组合。于是放弃了这个思路,索性就在beforeEach里直接判断了。

vue中路由按需加载的几种方式

使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,webpack在打包的时候会把整个路由打包成一个js文件,如果页面一多,会导致这个文件非常大,加载缓慢

vue-router 中参数传递(params,query)

query和params的区别,query相当于get请求,在页面跳转的时候,可以在地址栏看到请求参数,然而params则相当于post请求,参数不会在地址栏中显示。

Node.js的路由

当服务端接收到HTTP请求时,可以通过onRequest() 获取到url, pathname,query,及paramParams参数;为了解析这些数据需要使用url和querystring模块

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!