精华内容
下载资源
问答
  • vue 不同权限显示不同页面

    千次阅读 2019-10-17 10:25:21
    项目需求比较简单,不要求控制到按钮,只需控制到页面,有权限显示,没有权限不显示该页面。 网上很多方法,看的好几脸懵逼,不确定用什么方法。直到搜到以下demo,有了demo赶脚拥有了上帝视角,在此基础上改成自己...

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

    网上很多方法,看的好几脸懵逼,不确定用什么方法。直到搜到以下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.将生成好的路由addRoutes
          router.addRoutes(fixedRouter.concat(getRoutes))
    

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

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

    <el-aside class="slider_container">
            <el-menu
              background-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
    	  },
      }
    

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

    展开全文
  • 解决思路 后端权限控制 把每个页面路径放入数据库 根据不同的用户权限查询 到不同的页面路径 对于不同用户权限可以做成全局控制 ...在添加新用户且分配权限的时候 同时吧显示页面的路径进行绑定在数据 库的表中 ...

    解决思路
    后端权限控制 把每个页面路径放入数据库 根据不同的用户权限查询
    到不同的页面路径

    对于不同用户权限可以做成全局控制 不同权限的用户进入不同的页面
    在添加新用户且分配权限的时候 同时吧显示页面的路径进行绑定在数据
    库的表中
    
    展开全文
  • 后台管理系统中的权限管理是常见的问题,因为,后端管理牵扯到不同工作人员的职责和权限,所以,对于后台管理系统来说,不同的人员登录进入到系统后,看到的菜单(功能)是不一样的,这就是所谓的后台管理系统的...

    简介:

     后台管理系统中的权限管理是常见的问题,因为,后端管理牵扯到不同工作人员的职责和权限,所以,对于后台管理系统来说,不同的人员登录进入到系统后,看到的菜单(功能)是不一样的,这就是所谓的后台管理系统的权限。
    

    一、后台管理系统的权限怎么弄(前端)?

       1、首先后台管理系统的菜单的做成“活的”,即,菜单不能是纯粹的静态的,而应该是根据后端返回来的数据,来显示菜单的。
    
       2、菜单如何做成活的?
    
           如:
    

    1)、前端登录(给后端发送用户名和密码),后端验证成功后,会根据登录的用户,给前端返回来菜单数据,比如:

    [
    {
    “id”:“001”,
    “title”:“菜单01”,
    “url”:“menu01.html”
    },
    {
    “id”:“002”,
    “title”:“菜单02”,
    “url”:“menu02.html”
    },
    {
    “id”:“003”,
    “title”:“菜单04”,
    “url”:“menu04.html”
    }
    ]
    前端只需要把它循环一下,显示在页面上就行。

    二、如何根据权限展示不同的页面

      其实,这个跟第一个问题是一样的。
    

    三、再来解释一下,权限设置(如果你想进一步了解,就看这一点,如果不需要,那就不用看这一点了)

     1、权限设置:
    
           1)、后台管理系统,会给每个用户分配权限,分配权限有几个角度: 根据角色分配权限,根据用户分配权限。
    
              如果是根据角色(如:开发人员)分配权限,那么,属于该角色的用户(如果你是开发人员)都会拥有相同的权限。这样相当于批量给人员分配权限。
    
              进一步在角色(批量)分配权限的基础上,可以再针对个别用户进行单独设置权限。
              ==欢迎您关注我的公众.号:学习微站(studysth)==
    

    在这里插入图片描述

    展开全文
  • 登录不同权限跳转不同页面

    万次阅读 2016-06-23 14:52:33
    登录不同权限跳转不同页面

    action 登录时查询用户权限,讲权限信息以集合形式存放在用户的实体类中!   

       <pre name="code" class="java">       ActionContext ac =  ActionContext.getContext();
    
         ActionContext ac =  ActionContext.getContext();
               Map<String, Object> ctx =ac.getSession();
    
               SysUserDTO uInfo=service.toSysUserDTO(user);
                //将角色信息放入用户
                List<SysRole> lst =service.findRoleByUserId(user.getId());
                uInfo.setRoleList(lst);
    
                ctx.put("userInfo", uInfo);
    
               Map<String, Object> ctx =ac.getSession();
    
               SysUserDTO uInfo=service.toSysUserDTO(user);
                //将角色信息放入用户
                List<SysRole> lst =service.findRoleByUserId(user.getId());
                uInfo.setRoleList(lst);
    
                ctx.put("userInfo", uInfo);
    

     
    

    home hibernate框架返回实体类对象时,查询与剧中的表名要使用实体类名!

    public List<SysRole> findByUserId(String userId){
            String sql= "select sr from SysUser  su,SysRole sr,SysUserRole  sur where sur.userId = su.id and sur.roleId = sr.id and sur.userId ='"+userId+"'";
            Query query =sessionFactory.getCurrentSession().createQuery(sql);
            return query.list();
    
        }

    jsp 前台页面接受集合中相应权限的跳转路径,进行相应的跳转!

    <%
    
        SysUserDTO userInfo = (SysUserDTO)session.getAttribute("userInfo");
            String homePage ="";
            if(userInfo.getRoleList().size()>0){
                homePage=userInfo.getRoleList().get(0).getHomePage();
            }
    %>
    
    var mainPage = '<%=homePage%>';


    展开全文
  • &lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;%@taglib uri="... prefix="...%String path = request.getContextPath()
  • ## 打个比方:校长可以看到所有的菜单,校长可以修改老师的权限,使老师只能看到自己权限中包含菜单.同理老师也可以修改学生的菜单. 另外,如果校长取消了某个老师的A菜单,那么该老师名下所有学生的A菜单也随之取消. ##...
  • //登陆失败还到login页面 return "forward:/index.jsp"; } 3,增加shiro 的配置文件   name = "filters" > <!-- 将自定义 的FormAuthenticationFilter注入shiroFilter中-->   key = "authc"   value-ref = ...
  • 做前端开发的同学,大多都遇到过这种需求:页面菜单根据用户权限动态生成,一个常见的解决方案是: 前端初始化的时候,只挂载不需要权限路由,如登陆,注册等页面路由,然后等用户登录之后,后端返回当前用户的权限...
  • 后台管理系统中的权限管理是常见的问题,因为,后端管理牵扯到不同工作人员的职责和权限,所以,对于后台管理系统来说,不同的人员登录进入到系统后,看到的菜单(功能)是不一样的,这就是所谓的后台管理系统的...
  • vue-router权限控制and不同页面

    千次阅读 2019-04-13 13:51:04
    不同role 的首页面不同; 解决方案: 1.第一个问题 第一步静态and异步路由解决 由于不允许后端直接带路由过来所以 设计上 直接前端使用静态路由,和动态路由(异步); 后端只要根据账号,把角色role值传递过来就行了; ...
  • 我想让不同的用户组看到不同页面。比如: 有4个Fragment A B C D,Admin组能看到所有,Senior组能看到A B C,Junior组只能看到A B。 由于每个客户的数据库是独立的,所以没法像Web那样直接在数据库里创建 ...
  • 现在开发中出现一个问题,权限值保存在session中来实现对页面进行权限控制, 会出现强转失败,所以想问一下:一般开发中当管理员和普通用户需要使用同一套页面的时候使用权限控制合适还是使页面分离合适
  • 登陆页面 2.php 1 <title>无标题文档</title> 2 </head> 3 4 <...登陆页面</h1> 6 7 <form action="1.php" method="post"> 8 <div...
  • 单位的内部管理系统,不同的人员可以进行登录,登录后,根据不同的职位和权限,在同一个页面上每个人能看到的内容是不同,比如说公司的销售可以查看自己的订单,销售主管,可以查所有销售的订单,而技术部门不能查看...
  •   接十五、WEB项目开发之权限管理系统,在权限分配系统做好以后,我们需要开发“按照分配的权限显示不同的界面”功能。   基本流程是:   (一)在Session拦截器中,将用户能操作的所有菜单放入Session中 ...
  • Django 权限认证 编写 -- 根据不同的用户,设置不同显示和访问权限
  • 这篇博客的讲述基于使用 vue-router 之...现在以superadmin、admin、user三种不同的用户角色为例,在定义路由时,加上该路由可以由哪种用户角色来访问,代码如下所示: 比如说,/HelloWorld 页面这三种用户角色均可...
  • 本文介绍如何在thinkphp5中完成登录并保存session、然后根据不同的用户权限跳转相应页面功能的实现。完成该步骤主要有以下三个步骤完成。一、密码校验这里view层提交过来的用户名和密码是不加密的,数据中的密码是...
  • 实现不同用户登录显示不同页面

    万次阅读 2017-05-27 11:20:14
    实现不同用户登录显示不同页面$(function(){ var e = getCookie("seller_key"); // 判断是否有登录 if (!e) { location.href = "login.html" } if (getQueryString('seller_key') != '') { var key
  • 一效果如下,不同用户登陆看到的菜单不同。本文是在bootstrap布局(二)的基础上增加的功能。 管理员用户id是4,地址栏输入:localhost:8090/sysmenu/4 普通用户id是6,地址栏输入:localhost:8090/sysmenu/6 ...
  • OA权限模块根据用户权限显示不同的操作按钮

    万次阅读 热门讨论 2015-10-09 14:54:10
    前几篇博文介绍了如何根据不同的用户权限,实现不同的界面菜单,在权限模块中,属于比较粗粒度的划分。我们如果想控制一个用户的权限到具体的按钮应该怎么是实现呢?这篇博文就为大家简单的介绍一下。   一、情景...
  • 有关easyui中的权限--就是不同的用户登录之后你左边的菜单才会显示不同菜单栏,这里和大家简单说一下思路: 下面是我的数据库设计:我分为三张表: 用户表 角色表 权限表 还有就是关系表(我画了一个简单的图)、 ...
  • 最近在用SSM+layUI做自己的一个小项目,用到要根据登录信息显示不同页面的问题,和大家分享下,如有不足,欢迎指出。在开始之前先给大家看下效果用户登录之前,登录位置显示的是登录。下面是系统的登录界面用户登录...
  • 每个用户的权限不同,超级管理员可以将权限赋予给用户,用户不能操作不具有权限的功能,求大神帮忙
  • 个人笔记 ,初学者一枚有问题轻喷。android 不同权限登录显示不同的...下一个活动获取权限值之后判定,不同权限值设置不同的控件是否显示,从而得到不同的界面。 帐号123密码1显示界面一密码2显示界面二 登陆活动 j
  • 在需要实现跳转功能的页面给url传递相应的id, 然后在跳转显示的页面根据前面传过来的id调用接口,就可以实现id不同跳转的页面不同。 1.在index.wxml中可以通过设置id特性的值, 如 id="{{item.id}}"这样...
  • 在主页面的左边为功能导航,根据角色来确定功能导航 js先获取角色 根据角色,来控制各个功能的显示(show)与隐藏(hide)
  • 树状功能和普通功能是一样的做一个功能权限控制:一个角色对应多个功能模块,在查询的时候获取当前用户的角色,然后在生成树的时候只将当前角色拥有的功能组装成树按钮权限也差不多,可以为功能中的按钮统一命名,如...
  • OA权限模块根据用户权限显示不同的菜单

    万次阅读 热门讨论 2015-10-07 20:54:30
    权限模块中非常重要的一项就是根据用户的权限显示不同的菜单选项,那么在项目中是如何实现的呢?这篇博文就为大家简单的介绍一下。  一、设置主页的跳转页面  我们在访问时候,不管是什么角色的用户,第一个...
  • 对小程序的用户实现鉴权,让不同权限的人能做不同事。原理很简单,不过自己摸索也花了点时间。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 234,699
精华内容 93,879
关键字:

不同权限显示不同页面