vue-admin-template实现角色权限管理方式一

12 篇文章 0 订阅
5 篇文章 2 订阅

背景:前面提到测试工具箱整合页面集成后台,使用了vue作为前端,python的django作为后端,vue前端框架选择了 vue-admin-template(这是一个基础版本) 基础版本
既然是后台就会涉及到权限控制,基础版本的vue-admin-template 是没有路由权限控制的,最后是看 vue-element-admin 的 手摸手,带你用vue撸后台 系列二(登录权限篇) 对照的改的

vue-admin-template简介:
下载地址:vue-admin-template
在这里插入图片描述

1、修改 router/index.js

#所有权限通用路由表 
#如首页和登录页和一些不用权限的公用页面
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: 'Dashboard', icon: 'dashboard' }
    }]
  },
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

新增 asyncRoutes 动态路由

#异步挂载的路由
#动态需要根据权限加载的路由表 
export const asyncRoutes = [
  {
    path: '/tool',
    component: Layout,
    redirect: '/tool/table',
    name: 'tool',
    alwaysShow: true,
    meta: {
      title: '工具箱',
      icon: 'el-icon-s-help',
      roles: ['admin']
    },
    children: [
      {
        path: 'mobilecode',
        component: () => import('@/views/tool/mobilecode'),
        name: 'mobilecode',
        meta: { title: '手机号生成验证码', roles: ['admin'] }
      }, 
    ]
  },
  { path: '*', redirect: '/404', hidden: true }
]

根据 vue-router官方推荐 的方法通过meta标签来标示改页面能访问的权限有哪些。如meta: { role: [‘admin’,‘super_editor’] }表示该页面只有admin和超级编辑才能有资格进入

2、新增store/modules/permission.js文件

这个文件直接从集成版本里复制一份过来就行

3、修改store/modules/user.js

roles必须是array数组 后台返回的是roles:[‘admin’]这样格式的

import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: '',
    roles: []
  }
}

const state = getDefaultState()

const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState())
  },
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_ROLES: (state, roles) => {
    state.roles = roles
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  }
}

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({
        username: username.trim(),
        password: password
      }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo().then(response => {
        const { data } = response

        if (!data) {
          return reject('验证失败,请重新登录')
        }
        const { name, roles, avatar } = data
        if (!roles || roles.length <= 0) {
          reject('getInfo:roles must be a non-null array!')
        }

        commit('SET_NAME', name)
        commit('SET_ROLES', roles)
        commit('SET_AVATAR', avatar)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

  // user logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        removeToken() // must remove  token  first
        resetRouter()
        commit('RESET_STATE')
        commit('SET_ROLES', [])
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // remove token
  resetToken({ commit }) {
    return new Promise(resolve => {
      removeToken() // must remove  token  first
      commit('RESET_STATE')
      resolve()
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}


4、修改 store/ getter.js 和 index.js

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  refreshToken: state => state.user.refreshToken,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  roles: state => state.user.roles,
  permission_routers: state => state.permission.routes
}
export default getters

这里参考的是 vue-element-admin 中的方法

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
const store = new Vuex.Store({
  modules,
  getters
})
export default store

5、修改src/permission.js

照着admin中的permission.js 复制过来就行

6、修改layout/components/Sidebar/index.vue

 <sidebar-item v-for="route in permission_routers" :key="route.path" :item="route" :base-path="route.path" />

新增permission_routers
computed: {
    ...mapGetters([
      'permission_routers',
      'sidebar'
    ]),
  • 5
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在vue-admin-template中添加角色权限路由,可以按照以下步骤进行操作: 1. 在src目录下创建一个新的文件夹,例如"permission",用于存放与权限相关的文件。 2. 在permission文件夹中创建一个新的文件,例如"permission.js",用于定义权限相关的函数和路由。 3. 在permission.js文件中,首先导入需要的工具和路由配置文件。例如: ```javascript import { constantRoutes } from '@/router' ``` 4. 创建一个函数,用于根据角色权限动态生成路由。例如: ```javascript export function generateRoutes(roles) { // 根据角色权限进行路由过滤 const accessedRoutes = constantRoutes.filter(route => { if (hasPermission(roles, route)) { if (route.children && route.children.length) { route.children = filterAsyncRoutes(route.children, roles) } return true } return false }) return accessedRoutes } ``` 5. 创建一个辅助函数,用于判断当前角色是否有权限访问某个路由。例如: ```javascript function hasPermission(roles, route) { if (route.meta && route.meta.roles) { return roles.some(role => route.meta.roles.includes(role)) } else { return true } } ``` 6. 最后,在permission.js文件中导出生成的路由。例如: ```javascript export default { generateRoutes } ``` 7. 在src/router/index.js文件中,导入permission.js并使用生成的路由。例如: ```javascript import permission from '@/permission/permission' // 在路由的beforeEach钩子中根据角色权限动态生成路由 router.beforeEach(async(to, from, next) => { const hasRoles = store.getters.roles && store.getters.roles.length > 0 if (hasRoles) { next() } else { try { // 获取角色信息,可以根据实际情况修改 const { roles } = await store.dispatch('user/getInfo') // 根据角色权限动态生成路由 const accessedRoutes = permission.generateRoutes(roles) // 添加生成的路由 router.addRoutes(accessedRoutes) // 确保addRoutes完成 next({ ...to, replace: true }) } catch (error) { // 获取角色信息失败时的处理,可以根据实际情况修改 await store.dispatch('user/resetToken') next(`/login?redirect=${to.path}`) } } }) ``` 这样,根据用户的角色权限,动态生成的路由将会添加到路由配置中,用户只能访问其有权限的页面。请根据实际情况修改相关代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值