精华内容
下载资源
问答
  • vue权限管理

    2017-12-25 15:32:41
    vue权限管理,vue实战,vue学习,vue页面权限控制,vue项目实战
  • vue 权限管理

    千次阅读 2018-10-31 21:33:43
    首先需要了解的就是纯前端是无法实现权限管理的,vue权限管理主要是基于路由实现的,当然这样的权限管理完全可以被绕过去的,而之所以在前端这么做,更多是为了用户体验,节省不必要的加载开销等等。 用vue来实现...

    今天来说说权限管理,因为网上已经有很多关于这方面的很多内容,博主也是借鉴了网上的一些逻辑来写的,主要也是说说前端实现权限管理的一个思路,也是作为自己日后面对这样的问题的一个解决方案。
    首先需要了解的就是纯前端是无法实现权限管理的,vue的权限管理主要是基于路由实现的,当然这样的权限管理完全可以被绕过去的,而之所以在前端这么做,更多是为了用户体验,节省不必要的加载开销等等。
    用vue来实现权限管理,主要就是基于这个新的vue的api,addRoutes的方法来实现的,当然权限管理也分为几个方面,博主今天主要就是说的页面级的权限,思路就是利用刚刚说的api来动态加载路由,我们将路由分为两个部分,一个是公共部分,即所有人都能看到的路由,另外一部分则是动态加载部分,这里也简单的将代码贴出来,大家参考一下就可以,网上的代码也是有很多

    import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    export const constRouterMap = [
      {
        path: '/login',
        name: 'Login',
        meta: {
          title: '登录',
          keepAlive: false
        },
        component: () => import('@/views/Login.vue')
      },
      {
        path: '/layout',
        component: () => import('@/views/Layout.vue'),
        // redirect: '/login',
        // redirect: '/index',
        children: [
          {
            path: '/index',
            name: 'index',
            meta: {
              title: '首页',
              keepAlive: false
            },
            component: () => import('@/views/HomePage.vue')
          },
          {
            path: '/about',
            name: 'about',
            meta: {
              title: '开发备忘',
              keepAlive: false
            },
            component: () => import('@/views/About.vue')
          },
          {
            path: '/author',
            name: 'author',
            meta: {
              title: '关于作者',
              keepAlive: false
            },
            component: () => import('@/views/AboutAuthor.vue')
          },
          {
            path: '/weather',
            name: 'wether-fore',
            meta: {
              title: '天气预报',
              keepAlive: true
            },
            component: () => import('@/views/WeatherFore.vue')
          },
          {
            path: '/dynamic',
            name: 'dynamic-table',
            meta: {
              title: '动态表格',
              keepAlive: false
            },
            component: () => import('@/views/DynamicTable.vue')
          },
          {
            path: '/editable',
            name: 'editable',
            meta: {
              title: '可编辑表格',
              keepAlive: true
            },
            component: () => import('@/views/TableGrid.vue')
          }
        ]
      }    
    ]
    
    export const asyncRouterMap = [
      {
        path: '/layout',
        component: () => import('@/views/Layout.vue'),
        children: [
          {
            path: '/access',
            name: 'access',
            component: () => import('@/views/AccessTest.vue'),
            meta: {
              title: '权限控制',
              roles: ['admin'],
              keepAlive: false
            }
          },
          {
            path: '/cube',
            name: 'cube',
            component: () => import('@/views/MagicCube.vue'),
            meta: {
              title: '魔幻立方',
              roles: ['admin'],
              keepAlive: false
            }
          }
        ]
      },
      {
        path: '/error',
        component: () => import('@/views/NotFound.vue')
      },
      {
        path: '*', redirect: '/error', hidden: true
      }
    ]
    
    export default new Router({
      mode: 'history',
      routes: constRouterMap
    })
    
    

    看到这个代码应该知道,我们首先是先加载公共路由部分,然后再根据vue-router提供的路由导航钩子,当路由进行跳转的时候,向服务器请求用户的角色权限

    import router from './router'
    import store from '@/store/index'
    import { Message } from 'element-ui'
    const whiteList = ['/login']
    
    router.beforeEach((to, from, next) => {
      if (sessionStorage.getItem('token')) {
        if (to.path === '/') {
          next('/index')
        } else {
          if (store.getters.roles.length === 0) {
            const roles = sessionStorage.getItem('roles')
            store.dispatch('permission/generateRoute', { roles })
              .then(() => {
                console.log(store.getters.addRoutes[0].children.length)
                router.addRoutes(store.getters.addRoutes)
                next({ ...to, replace: true })
              })
              .catch(err => {
                Message.error({ message: err })
              })
          } else {
            next()
          }
        }
      } else {
        if (whiteList.indexOf(to.path) !== -1) {
          next()
        } else {
          next('/login')
        }
      }
    })
    
    

    这里后台博主用了thinkjs的框架,博主现在还在整理,后续整理好,也会上传到github上面。在这个导航钩子上,我们利用了vuex来存储角色信息,每次登陆会进行判断,如果没有角色信息,就会去触发action来请求服务器,服务器返回角色字段后,我们将他存在store里面。另外根据上面的路由,我们将页面权限需要的角色放在路由的meta字段中,所以当我们拿到角色信息后,会和动态路由中的meta进行一一对比,需要注意的是,当路由有嵌套的children属性时,我们还需要将children里面的路由拿出来一一进行递归对比,这样如果服务器的角色信息,符合路由需要的权限,我们就将这个路由记录下来,最后组成需要添加的路由,利用addRoutes来形成最终的路由。

    generateRoute ({ commit }, data) {
          return new Promise((resolve, reject) => {
            const roles = []
            roles.push(data.roles)
            let accessRouters
            console.log(roles.indexOf('admin') >= 0)
            if (roles.indexOf('admin') >= 0) {
              accessRouters = asyncRouterMap
            } else {
              accessRouters = filterAsyncRouter(asyncRouterMap, roles)
            }
            // console.log(accessRouters)
            commit('SET_ROUTERS', accessRouters)
            commit('SET_ROLES', roles)
            resolve()
          })
        },
    
    function hasPermission (roles, route) {
      if (route.meta && route.meta.roles) {
        return roles.some(role => route.meta.roles.indexOf(role) >= 0)
      } else {
        return true
      }
    }
    
    function filterAsyncRouter (asyncRouter, roles) {
      const accessRouters = asyncRouter.filter(route => {
        if (hasPermission(roles, route)) {
          if (route.children && route.children.length) {
            route.children = filterAsyncRouter(route.children, roles)
          }
          return true
        }
        return false
      })
      // console.log(accessRouters)
      return accessRouters
    }
    

    结合前面的导航钩子就形成了最终的路由,当用户试图访问不存在的路由的时候,则会返回404页面,另外也简单的说下按钮及页面中视图显示的权限,其实也是利用了vue的自定义指令,我们给自定义指令传入需要的角色权限数组,然后和存储在store中的权限作对比,如果没有权限,则移除当前的DOM元素

    import store from '@/store/index'
    
    const permission = {
      inserted (el, binding, vnode) {
        const { value } = binding
        const roles = store.getters && store.getters.roles
        if (value && value instanceof Array && value.length > 0) {
          const permissionRoles = value
          const hasPermission = roles.some(role => {
            return permissionRoles.includes(role)
          })
          if (!hasPermission) {
            el.parentNode && el.parentNode.removeChild(el)
          }
        } else {
          throw new Error('roles is must be Array!')
        }
      }
    }
    export default permission
    
    

    这些代码都是博主自己写的项目中的片段,完整的代码,大家有兴趣可以去GitHub上面查看。之前写的权限没有问题,但是重新整理的时候,突然发现权限需要刷新的时候才会生效,技术有限,所以要是有同学发现代码有什么问题,可以随时告诉博主,当然博主也是会继续踩坑下去,解决这个问题。

    展开全文
  • Vue权限管理

    千次阅读 2018-11-28 12:17:49
    Vue权限管理前言我们首先去定义一个路由表下面就是我们的各个组件的定义了 前言 博主最近刚刚上手一个图书管理系统的小Demo,在编写的过程中遇到了许多的问题,尤其是对于我这样的新手来说权限管理是一个难点,...

    前言

    博主最近刚刚上手一个图书管理系统的小Demo,在编写的过程中遇到了许多的问题,尤其是对于我这样的新手来说权限管理是一个难点,本身对Vue就不是很理解,所以查阅了许多的文章后才有一点点思路,所以在这里记录下来,也希望其他的小白也能够少走一些弯路。

    我大概的思路是这样的

    首先,我们我们有两种用户,一个admin(管理员),一个user(普通用户),他们所看到的界面都是不一样的
    第一步:我们将一些公用的组件提取出来制作成一个静态路由表,其他需要有权限的展示的组件我们把他制作成动态的路由表
    第二步:当我们登录的时候获取用户的身份,然后我们遍历动态路由表,动态的生成路由表

    是不是这样就感觉简单很多了呢,下面我们来建立一个一个简单的demo吧!先看一下我的结构图


    error------错误组件(当路径错误时显示)
    login------登录组件
    home------普通用户界面
    home--------管理员界面

    我们首先去定义一个路由表

    import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    const router = new Router({
      routes: [
        {
          path: '/',
          name: 'login',
          component: (resolve) => require(['../components/login.vue'], resolve)
        },
        {
          path: '/login',
          name: 'login',
          component: (resolve) => require(['../components/login.vue'], resolve)
        },
        {
          path: '/404',
          name: 'err',
          component: (resolve) => require(['../components/error.vue'], resolve)
        }
      ]
    })
    export default router;//我们把静态的路由表导出去
    
    //我们使用meta标签来定义里面的权限
    export const dynamicRouter = [
      {
        path: '/home',
        name: 'home',
        meta: {
          roles:['user']//表示只有user的权限才能够访问这个界面
        },
        component: (resolve) => require(['../components/home.vue'], resolve)
      },
      {
        path: '/home',
        name: 'home2',
        meta: {
          roles:['admin']
        },
        component: (resolve) => require(['../components/home2.vue'], resolve)
      },
    ];
    
    

    下面就是我们的各个组件的定义了

    在这里插入图片描述

    最后就是我们的login组件了

    <template>
      <div>
        <form>
          账户:<input type="text" :model="user">
          密码:<input type="text" :model="pass">
          <button @click="updateR">修改权限</button>
          <input type="button" value="登录" @click="Login">
        </form>
      </div>
    </template>
    
    <script>
      import {router,dynamicRouter} from '../router/index' //获取路由配置文件里的两个路由表
      export default {
        name: "login",
        data(){
          return{
            user:'',
            pass:'',
            roles:'user'
          }
        },
        methods:{
          Login(){
            let dR = new Array(); //创建一个数组用来存储符合权限的路由
            for (let i=0;i<dynamicRouter.length;i++){ //第一层循环遍历动态路由表的每一个路由
              for (let j=0;j<dynamicRouter[i].meta.roles.length;j++){ //第二次循环遍历每一个路由里的roles设置的权限并和当前登录账号的权限比较
                if (dynamicRouter[i].meta.roles[j] == this.roles){//此处因为没有后台我就把权限写死在data里面了
                  dR.push(dynamicRouter[i]); //符合条件的路由信息就放进数组里
                }
              }
            }
            console.log(dR);
            this.$router.addRoutes(dR.concat([{ //动态添加符合条件的路由
              path: '*',
              redirect: '/404' //所有不匹配路径(*)都重定向到404
            }]));
            this.$router.push({path:'/home'}); //登录验证后跳转到主页home页面
          }
        },
        updateR(){
          if (this.roles === 'admin'){
            this.roles === 'user'
          } else{
            this.roles === 'admin'
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>
    
    
    展开全文
  • vue-access-control []() :gem: Vue权限管理解决方案介绍Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由、视图、请求三个层面的控制,使开发者可以实现任意颗粒度的...

    vue-access-control

    vue-access-control.svg [

    Vue-Access-Control.svg]()

    :gem: Vue权限管理解决方案

    介绍

    Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由、视图、请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制。

    文档

    下载

    git:git clone https://github.com/tower1229/Vue-Access-Control.git

    npm:npm i vue-access-control

    演示

    测试账号:

    1. username: root

    password: 任意

    2. username: client

    password: 任意

    演示地址:

    运行及构建

    # install dependencies

    npm install

    # serve with hot reload at localhost:8080

    npm run dev

    # build for production with minification

    npm run build

    # build for production and view the bundle analyzer report

    npm run build --report

    For a detailed explanation on how things work, check out the guide and docs for vue-loader.

    许可证

    Copyright (c) 2017-present, 前端路上

    展开全文
  • 主要介绍了vue权限管理系统的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了浅谈vue权限管理实现及流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue权限管理解决方案

    2017-11-30 12:42:02
    :gem: Vue权限管理解决方案 介绍 Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由、视图、请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制。 文档 ...

    中文 | English

    vue-access-control

    npm [license]()

    :gem: Vue权限管理解决方案

    介绍

    Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由、视图、请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制。

    文档

    Vue2.0用户权限控制解决方案

    基于Vue实现后台系统权限控制

    用addRoutes实现动态路由

    下载

    项目主页:http://refined-x.com/Vue-Access-Control/

    git:git clone https://github.com/tower1229/Vue-Access-Control.git

    npm:npm i vue-access-control

    演示

    测试账号:

    1. username: root
       password: 任意
    2. username: client
       password: 任意

    演示地址:

    vue-access-control.refined-x.com

    运行及构建

    # install dependencies
    npm install
    
    # serve with hot reload at localhost:8080
    npm run dev
    
    # build for production with minification
    npm run build
    
    # build for production and view the bundle analyzer report
    npm run build --report

    For a detailed explanation on how things work, check out the guide and docs for vue-loader.

    许可证

    MIT

    Copyright (c) 2017-present, 前端路上

    <br /><br />

    转载于:https://blog.51cto.com/refinedx/2046010

    展开全文
  • vue权限系统后台管理系统一般都会有权限模块,用来控制用户能访问哪些页面和哪些数据接口。大多数管理系统的页面都长这样。下面预览图是我写的一个后台管理系统,源码请点击链接 vuets-iview-admin 技术栈 - vue+...
  • vue权限管理系统

    千次阅读 2019-01-17 19:54:23
    vue权限系统 后台管理系统一般都会有权限模块,用来控制用户能访问哪些页面和哪些数据接口。大多数管理系统的页面都长这样。 左边为菜单,分为两级,右边为图表显示区域,有增删改查的按钮。 表的结构 SET NAMES ...
  • VUE权限管理,精确控制到按钮级别

    千次阅读 2019-11-07 16:42:28
    VUE权限管理,精确控制到按钮级别 一个完整的权限系统必不可少的两个部分是: 控制页面元素的渲染 动态注册路由 控制页面元素的渲染 肯定不能用v-if来控制页面元素的渲染,太繁琐,每个页面都得去获取用户的权限,...
  • vue权限管理

    2019-09-14 09:11:34
    想必大家的公司基本上都会有自己的后台管理系统吧,那肯定就是管理人员和公司高管登上系统看到肯定和普通员工不一样的甚者可以说是每一个人有一种权限,今天在这里给大家分享一下我写的。 一:解决思路 虽然权限是...
  • springboot+vue 权限管理系统

    千次阅读 2019-01-24 10:37:13
    权限管理系统 demo http://permission.yuanjy.com 前端 github地址:https://github.com/yjysanshu/vue--authority 后端 github地址:https://github.com/yjysanshu/springboot-authority 简介 该权限管理项目是...
  • 包含了成熟的后台管理功能和手机端h5内容站点系统 部门管理 用户管理 ...cms内容管理,配合flash-vue-h5提供了手机端内容展示系统 消息管理:配置消息模板,发送短信,邮件消息 基于idea插件的代码生成
  • vue 权限管理深度探究

    2019-03-14 23:42:00
    2、路由的全局前置守卫(beforeEach)会判断路由用户是否登录(未登录跳转至登录界面),以及登录用户是否有权限查看该页面(无权限跳转至tips页面)。3、home中导航树根据权限信息的不同,渲染不同的页面。--------...
  • vue权限管理学习笔记

    2018-11-13 17:43:35
    1、注册 2、登录     3、 路由守卫 4、配置请求拦截和响应拦截     5、在登录中引入解析token模块,解析token  npm install jwt-decode     6、在vuex中存储数据(用户信息/token)  ... ...
  • RXThinkCMF_EVTP6_PRO前后端分离开发框架是基于 ThinkPhp6+ElementUI+Vue 开发的权限架构及内容管理框架,采用全新的前端UI框架,支持多主题切换,前端UI框架完全适配手机端、PAD终端以及PC电脑终端,框架内置完整的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,610
精华内容 1,444
关键字:

vue权限管理

vue 订阅