vue 不同权限显示不同页面

新手上路。项目需求比较简单，不要求控制到按钮，只需控制到页面，有权限显示，没有权限不显示该页面。

网上很多方法，看的好几脸懵逼，不确定用什么方法。直到搜到以下demo，有了demo赶脚拥有了上帝视角，在此基础上改成自己适用的。

1.基于Vue实现后台系统权限控制这是个比较华丽的demo，但是对于我来说页面很多，反而很难提取到某个功能关键代码。
2.Vue动态菜单(路由)的实现方案(beforeEach+addRoutes+elementUI)这个简单易懂。

看代码还是容易的，就不贴我的实现了，记录下主要步骤：
1.最重要的就是本地路由表了
meta下的roles属性控制了是否在菜单中显示该页面，这个demo中用的是用户角色，我的项目中没有分配角色，后端返回给我有权限的菜单list，因此我的roles属性直接填写菜单名称即可匹配。
跳转，显示很多都读取这个文件内容。根据自己情况增删属性

//代码位置：router/index.js{path: '',component: layout, //整体页面的布局(包含左侧菜单跟主内容区域)children: [{path: 'main',component: main,meta: {title: '首页', //菜单名称roles: ['user', 'admin'], //当前菜单哪些角色可以看到 （我的这里改为菜单名称）icon: 'el-icon-info' //菜单左侧的icon图标}}]}

2.向上面roles中塞数据
用到了localStorage，我理解为全局变量，我的这篇博客 1.2有写

登录后，拿到权限存到变量中

let getUserRole = this.formModel.user === 'admin' ? 'admin' : 'user'localStorage.setItem('userRole', getUserRole)

//代码位置：src/permission.js// 取到用户的角色let GetRole = localStorage.getItem("userRole")//。。。demo中有，去掉一些逻辑，只展示如何添加到roles// 4.将生成好的路由addRoutesrouter.addRoutes(fixedRouter.concat(getRoutes))

这里roles已经有值了，这两步是最重要的，可以实现过滤。剩下就是渲染菜单的组件sideMeuns.vue重新生成左侧菜单。
菜单中显示也是通过读取路由数据，router/index.js中要调成自己合适的结构。

demo中我修改的地方：
1.左侧菜单是通过router-link组件跳转的，加上背景色，会有紫色下划线，感觉很丑。在父组件menu中加上router也可跳转。

<el-aside class="slider_container"><el-menubackground-color="#304156"router><!-- 菜单组件 --><side-Meuns :routes="getMyRoutes"></side-Meuns></el-menu>

2.如果菜单下只有一个子菜单时，就不显示它的父菜单了。不符合我的业务需求
一级菜单也需要显示主菜单，添加以下代码。

<!-- 一级菜单的情况 --><template v-if="item.children&&item.children.length<=1"><el-submenu :index="item.path"><template slot="title"><!-- 设置icon --><i v-if="item.meta" :class="item.meta.icon"></i><!-- 菜单名称 -->{{ item.title }}</template>

3.增加面包屑导航栏
增加导航栏子组件breadcrumbNav.vue：

<template><el-breadcrumb class="app-breadcrumb" separator="/"><transition-group><el-breadcrumb-item  v-for="(item,index) in levelList" :key="item.path" v-if="item.meta.title"><span   v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{item.meta.title}}</span><router-link   v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link></el-breadcrumb-item></transition-group></el-breadcrumb>
</template>
<script>export default {name: "idnex",data(){return {levelList:null}},created() {this.getBreadcrumb()},watch:{$route(){this.getBreadcrumb()}},methods:{getBreadcrumb(){let matched=this.$route.matched.filter(item=>item.name)//$route.matched 将会是一个包含从上到下的所有对象 (副本)。const first=matched[0]if(first && first.name !=='dashboard'){//$route.name当前路由名称  ；$route.redirectedFrom重定向来源的路由的名字matched=[{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)}this.levelList=matched}}}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>.app-breadcrumb.el-breadcrumb {display: inline-block;font-size: 14px;line-height: 50px;margin-left: 10px;.no-redirect {color: #97a8be;cursor: text;}}
</style>

在父组件中添加

 <!-- 面包屑导航 --><breadcrumbNav :currentPath="breads"></breadcrumbNav><script>      import breadcrumbNav from "../common/breadcrumbNav"; //面包屑路径</script>export default {components: {sideMeuns,breadcrumbNav},}

仅记录，如有错误欢迎指正。
有更优雅的方案，期待分享交流。

vue 不同权限显示不同页面相关推荐

vue 根据权限显示不同页面解决方案
第一步:在登陆成功后获取权限列表, 获取的路由权限可以进行Session存储.并定义一个默认的路由.根据所拥有的权限添加进去所显示的路由. import Vue from 'vue' import V ...
vue里面怎么删除部分页面_基于VUE选择上传图片并页面显示（图片可删除）
基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件: HTML文本内容: 相关照片 JS文本内容: /** * 从 file 域获取本地图片 url */ fun ...
vue中使用axios post上传头像/图片并实时显示到页面
前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮完成图片的上传成功代码部分有参考他人的写法. html代码: <div id="myPhoto&qu ...
vue启动成功，无法访问localhost:8080,以及用ip进行访问———无法显示此页面
vue启动成功,无法访问localhost:8080,以及用ip进行访问---无法显示此页面 1. 最近在进行vue环境搭建的时候遇到一个问题困扰了一个多小时一直无法解决,在百度csdn上一直找解决方 ...
vue 按钮权限控制
vue 按钮权限控制前言在日常项目中,会碰到需要根据后台接口返回的数据,来判断当前用户的操作权限.必须当有删除权限时,就显示删除按钮.没有这个权限时,就不显示或者删除这个按钮.通过查找资料,通过 ...
blob二进制显示在html,使用Blob获取图片并二进制显示实例页面
HTML代码: JS代码: var eleAppend = document.getElementById("forAppend"); window.URL = window.UR ...
VUE还没生效，页面闪屏的问题解决办法 v-cloak
当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码.我们可以使用 v-cloak 指令来解决这一问题. html: <div id=&quo ...
axios获取图片显示_vue中使用axios post上传头像/图片并实时显示到页面的方法
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮完成图片的上传成功代码部分有参考他人的写法. html代码: 请上传图片 js代码: //实时显示该图片在页面 g ...
vue 路由参数变化，页面不刷新，provide /inject 完美解决方案
此方法使用的是v-if来控制router-view的显示或隐藏,v-if从false变为true时,vue会重新渲染router-view区域,所以当参数变化时,只需让v-if 从true => ...

vue 不同权限显示不同页面

vue 不同权限显示不同页面相关推荐

最新文章

热门文章