# vue_user_permission_demo

**Repository Path**: zihaoyu/vue_user_permission_demo

## Basic Information

- **Project Name**: vue_user_permission_demo
- **Description**: 主要是基于vue-admin-template实现对前端路由表用户权限管理功能实现
- **Primary Language**: JavaScript
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2023-02-16
- **Last Updated**: 2024-06-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端路由表角色权限管理，通过登录不同角色侧边栏显示对应页面
## demo根据vue-admin-template为基础修改，首先展示实现的效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/24c6e170488f4c94a7c1a128a2752b5b.gif#pic_center)


### 1. 首先在src/router/index.js中添加路由表，其中constantRoutes 设置的为所有角色可见的路由，asyncRouterMap为对应权限人员可见路由，demo路由表代码如下:
 

```javascript
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

//避免导航守卫报错
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}
/* Layout */
import Layout from '@/layout'

//所有人可见
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index'),
        meta: {
          title: '首页',
          icon: 'dashboard'
        }
      }
    ]
  },

  {
    path: '/example',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'Table',
        component: () => import('@/views/table/index'),
        meta: {
          title: '所有人可见',
          icon: 'table'
        }
      }
    ]
  },
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

//相应权限人员可见
export const asyncRouterMap = [
  {
    path: '/form',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'Form',
        component: () => import('@/views/form/index'),
        meta: {
          title: '所有人可见',
          icon: 'form',
          role: ['admin']
        }
      }
    ]
  },
  {
    path: '/system',
    component: Layout,
    redirect: 'system/test',
    name: 'System',
    alwaysShow: true,
    meta:{title:'系统管理', icon: 'nested', role: ['admin','editor']},
    children: [
      {
        path: '权限管理',
        name: 'test',
        name: 'Test',
        component: () => import('@/views/system/index'),
        meta: {
          title: '权限修改',
          icon: 'table',
          role: ['admin']
        }
      }
    ]
  }
]

const createRouter = () =>
  new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
  })

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

```
### 2.在src/api/user.js中创建用户登录，获取用户信息，以及登出的接口
![在这里插入图片描述](https://img-blog.csdnimg.cn/7e31c371c16c4e2290f09c689711e9e8.png#pic_center)
### 3.在store/modules/user.js文件，添加获取角色权限role的信息
![在这里插入图片描述](https://img-blog.csdnimg.cn/d6e8282f46534b90b74b0b52d0b0e00d.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/9a23b689b5e548fca968ad1d93bb69fe.png#pic_center)
### 4.在src/store/modules/目录下创建permission.js，来存储不同权限动态添加的路由表，文件代码如下：

```javascript
import { asyncRouterMap, constantRoutes } from '@/router'

/**
 * Use meta.role to determine if the current user has permission
 * @param role
 * @param route
 */
function hasPermission(role, route) {
    if (route.meta && route.meta.role) {
        // return roleArr.some(role => route.meta.role.includes(role))  //当给的角色权限为数组形式可采取该方式判断返回值
        return route.meta.role.includes(role)?true:false  //当角色权限为字符串时，采用该方式判断
    } else {
        return true
    }
}

/**
 * 将符合相应权限的路由表筛选出来
 * @param routes asyncRouterMap
 * @param role
 */
export function filterasyncRouterMap(routes, role) {
    const res = []
    routes.forEach(route => {
        const tmp = { ...route }
        if (hasPermission(role, tmp)) {
            console.log(111);
            if (tmp.children) {
                tmp.children = filterasyncRouterMap(tmp.children, role)
            }
            res.push(tmp)
        }
    })

    return res
}

const permission = {
    state: {
        routes: [],
        addRoutes: []
    },
    mutations: {
        SET_ROUTES: (state, routes) => {
            state.addRoutes = routes
            state.routes = constantRoutes.concat(routes)
        }
    },
    actions: {
        generateRoutes({ commit }, role) {
            return new Promise(resolve => {
                let accessedRoutes
                //如果角色是admin
                if (role.includes('admin')) {
                //将route.js中的admin权限人员可见的路由表加入，此处我们只有admin和editor两个角色
                    accessedRoutes = asyncRouterMap || []
                } else {
                    accessedRoutes = filterasyncRouterMap(asyncRouterMap, role) || []
                }
                commit('SET_ROUTES', accessedRoutes)
                resolve(accessedRoutes)
            })
        }
    }

}

export default permission
```
### 5.在src/store/getters.js中，代码如下（**注意：state.permission.routes别写成了state.user.routes**）：
![在这里插入图片描述](https://img-blog.csdnimg.cn/ce3b9403d7474ff48eb20359073752b6.png#pic_center)
### 6.在src/store/index.js中，代码如下
![在这里插入图片描述](https://img-blog.csdnimg.cn/737d3dc459a04baf988029a430739f61.png#pic_center)
### 7.最后在src/permission.js的路由导航守卫中添加动态路由，此处用到了vue-router的addRoute函数，修改处代码如下：
![在这里插入图片描述](https://img-blog.csdnimg.cn/011c06774c4045f59928bf1c2e51f5c4.png#pic_center)
### 8.在src/layout/components/Sidebar/index中，添加新的路由表，代码如下：
![在这里插入图片描述](https://img-blog.csdnimg.cn/04775f34016a4943b2481f93d93b3644.png#pic_center)

最终可以实现文章首部动图效果，简单的记录下前端路由表权限管理功能实现，若有不正确处，评论处可交流讨论，文末会贴源码，安装依赖后可直接运行。

文末demo码云链接：[权限管理demo](https://gitee.com/zihaoyu/vue_user_permission_demo)