RABC权限学习记录文档

export const constantRoutes = [
  // 设备管理
  {
    path: '/equipment',
    component: Layout,
    alwaysShow: true,
    meta: { title: '设备管理', icon: 'component' },
    redirect: 'noRedirect',
    children: [
      {
        path: '/equipment/client',
        component: () => import('@/views/equipment/client'),
        name: 'Client',
        meta: { title: '设备管理', icon: 'wajueji', noCache: true }
      },
      {
        path: '/equipment/client/clientdetails',
        component: () => import('@/views/equipment/client/clientdetails'),
        name: 'Clientdetails',
        hidden: true,
        meta: { title: '设备详情', noCache: true }
      },
      {
        path: '/equipment/assembly',
        component: () => import('@/views/equipment/assembly'),
        name: 'Assembly',
        meta: { title: '总成管理', icon: 'form', noCache: true }
      },
      {
        path: '/equipment/assembly/assemblydetails',
        component: () => import('@/views/equipment/assembly/assemblydetails'),
        name: 'Assemblydetails',
        hidden: true,
        meta: { title: '总成详情', noCache: true }
      },
      {
        path: '/equipment/fault',
        component: () => import('@/views/equipment/fault'),
        name: 'Fault',
        meta: { title: '故障停机', icon: 'error', noCache: true }
      },
      {
        path: '/equipment/fault/details',
        component: () => import('@/views/equipment/fault/details'),
        name: 'Details',
        hidden: true,
        meta: { title: '故障明细', noCache: true }
      }
    ]
  }
]

字段	类型	备注
id	int	主键
pid	int	上级部门id
parent_name	varchar(128)	上级部门名称
name	varchar(128)	部门名称
dept_code	varchar(36)	部门编码
dept_phone	varchar(20)	部门电话
dept_address	varchar(255)	部门地址
like_id	varchar(255)	所有上级部门id和自己id的集合，逗号分隔如 1，3，5
order_num	int	序号
manager	varchar(36)	部门经理

// 判断是否是末级的js方法
import leafUtils from '@/utils/leafUtils'    
// 分配权限的属性结构查询 处理数据 能实现权限勾选
  async assignRole (row) {
      // 防止this指向的不是vue实例对象
      this.roleId = row.id
      const parm = {
        roleId: row.id,
        userId: this.$store.getters.userId
      }
      const res = await getAssignTreeApi(parm)
      if (res && res.code == 200) {
        // 当前登录用户所拥有的所有权限
        const menuList = res.data.listmenu
        // 当前被分配的角色所拥有的权限
        const selectIds = res.data.checkList
        // 进行一次递归 提取出末级的递归方法变量
        const { setLeaf } = leafUtils()
        // 判断是否末级(设置末级状态位) setLeaf实际上是递归的方法
        const newMenuList = setLeaf(menuList)
        // 把处理好的末级树形结构赋值给页面 渲染出来(需替换成自己的)
        this.assignTreeData = newMenuList
        // 准备第二次递归 勾选树形结构的内容
        this.$nextTick(() => {
          // 这里通过ref绑定处理好末级的树形结构 注意要this.$nextTick渲染后再调用 nodes是通过vue实例拿到的渲染好的树形结构
          const nodes = this.$refs.assignTree.children
          // 进行第二次递归处理 nodes是通过vue实例拿到的树形结构 selectIds是当前角色用户选中权限的id合集 (权限选中数组) 
          this.setChild(nodes, selectIds, this)
          console.log(nodes)
        })
      }
      // 打开弹出层(需替换成自己的)
      this.assignDialog.visible = true
      this.assignDialog.title = '为【' + row.name + '】分配权限'
    },
   setChild (childNodes, selectIds, that) {
      // 这里不要使用this 要使用上个方法传来的that 以防止this指向错误
      // 判断树形结构是否存在且不小于0
      if (childNodes && childNodes.length > 0) {
        // eslint-disable-next-line no-lone-blocks
        // 遍历树形结构 需要调用element getNode()方法 拿到每个node (每个节点的内容 也就是包含一级二级三级都拿出来)
        for (let j = 0; j < childNodes.length; j++) {
          // 拿到树形结构中的每个node (每个节点的内容 也就是包含一级二级三级都拿出来)
          var node = that.$refs.assignTree.getNode(childNodes[j])
          // 判断(权限选中数组)是否存在 且长度不小于0
          if (selectIds && selectIds.length > 0) {
            // 遍历(权限选中数组) 那存储的所有权限选中id 去树形结构每个节点中的id其匹配
            for (let h = 0; h < selectIds.length; h++) {
              // 如果匹配到了相同的id 说明具备该权限 需要处于选中状态
              if (selectIds[h] == childNodes[j].id) {
                // 这里来判断是否为末级 (通过第一次遍历修改open状态)
                if (childNodes[j].open) {
                  // 通过调用element setChecked()方法 把未勾选变成已勾选状态 node是一级二级三级都拿出来
                  that.$refs.assignTree.setChecked(node, true)
                  // 不用return返回 打断即可
                  break
                }
              }
            }
          }
          // 这里进行判断 如果节点存在children(二级三级) 就继续递归
          if (childNodes[j].children) {
            // 携带所需要的参数childNodes[j](每层数据) selectIds(权限选中数组) that(当前指向)
            that.setChild(childNodes[j].children, selectIds, that)
          }
        }
      }
    },

 this.$refs.assignTree.setCheckedKeys([]) // 清除树形结构内容 适合做角色切换内容

      // 获取绑定node-key的值(一般为条目的id值) getCheckedKeys是获取勾选的id getHalfCheckedKeys是获取半勾选的内容 (半勾选是路由权限 里面勾选的是按钮等元素权限 两者都需要获取到)
      // 通过concat()方法把两个数组拼接起来
      const listId = this.$refs.assignTree.getCheckedKeys().concat(this.$refs.assignTree.getHalfCheckedKeys())
      // 这里是全勾选和半勾选全部的合集内容
      console.log(listId)

import Cookies from 'js-cookie'
// cookie命名
const TokenKey = 'Admin-Token'
// session命名
const timeKey = 'expireTime'

// 获取cookie
export function getToken () {
  return Cookies.get(TokenKey)
}
// 保存cookie
export function setToken (token) {
  return Cookies.set(TokenKey, token)
}
// 移除cookie
export function removeToken () {
  return Cookies.remove(TokenKey)
}
// 清空sessionStorage
export function clearStorage () {
  return sessionStorage.clear()
}
// 设置token过期时间 (保存token过期和当前时间进行比较 低于10分钟(或其他时间)进行续签)
export function setTokenTime (time) {
  return sessionStorage.setItem(timeKey, time)
}
// 重置token过期时间 (清空token不需要设置为'' 或者null 防止无法判断 需要设置为0或-1)
export function removeTokenTime () {
  return sessionStorage.setItem(timeKey, 0)
}
// 获取储存的token的时间
export function getTokenTime () {
  return sessionStorage.getItem(timeKey)
}

    // 清空token
    removeToken()
    // 清空缓存
    clearStorage()
    // 重置token时间戳
    removeTokenTime()
    // 刷新跳转
    window.location.href = '/login'

import Cookies from 'js-cookie'
// cookie命名
const TokenKey = 'Admin-Token'
// session命名
const timeKey = 'expireTime'

// 获取cookie
export function getToken () {
  return Cookies.get(TokenKey)
}
// 保存cookie
export function setToken (token) {
  return Cookies.set(TokenKey, token)
}
// 移除cookie
export function removeToken () {
  return Cookies.remove(TokenKey)
}
// 清空sessionStorage
export function clearStorage () {
  return sessionStorage.clear()
}
// 设置token过期时间 (保存token过期和当前时间进行比较 低于10分钟(或其他时间)进行续签)
export function setTokenTime (time) {
  return sessionStorage.setItem(timeKey, time)
}
// 重置token过期时间 (清空token不需要设置为'' 或者null 防止无法判断 需要设置为0或-1)
export function removeTokenTime () {
  return sessionStorage.setItem(timeKey, 0)
}
// 获取储存的token的时间
export function getTokenTime () {
  return sessionStorage.getItem(timeKey)
}

// token续签
export async function refreshTokenApi (parm) {
  return await http.post('/api/sysUser/refreshToken', parm)
}

import axios from 'axios'
// 导入vuex
import store from '@/store'
// 处理token和cookie
import { getToken, getTokenTime, setTokenTime, removeTokenTime, setToken, clearStorage, removeToken } from '@/utils/auth'
import { refreshTokenApi } from '@/api/user'
// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
 // timeout: 5000 // request timeout
})
//! --------------------处理token续签
// token续签方法
function reFresh () {
  // 声明一个变量 储存当前token 作为替换凭证
  const parm = {
    'token': getToken()
  }
  // 向接口请求一个新的token
  return refreshTokenApi(parm).then(res => {
    return res
  })
  // 这里其实可以简写
  //  return refreshTokenApi(parm).then(res => res)
}
//! 处理token续签
// 定义一个状态位 防止多次获取 无需每个接口都请求
let isReFresh = false

// request interceptor
// 发送请求之前的拦截器
service.interceptors.request.use(
  config => {
    //! 处理token续签
    // 获取当前系统时间戳
    const curent = new Date().getTime()
    // 获取缓存中的时间戳
    const expireTime = getTokenTime()
    // 如果缓存中的时间戳存在
    if (expireTime > 0) {
      const minMx = (expireTime - curent) / 1000 / 60 // 毫秒计算
      // 判断token时间是否小于十分钟 小于十分钟进行token续签操作
      if (minMx < 10) {
        // 判断状态位 为false执行 防止多次请求token续签接口
        if (!isReFresh) {
          isReFresh = true
          // 返回操作 不再执行以下拦截器操作 防止报错
          return reFresh().then(res => {
            // 判断是否请求成功
            if (res.code == 200) {
              // 设置新的token
              setToken(res.data.token)
              // 设置新的时间戳
              setTokenTime(res.data.expireTime)
              // 把新的token添加到头部 实现正常获取数据
              config.headers['token'] = getToken()
            }
            // 返回config 正常获取接口数据
            return config
          }).catch(res => {
            // 如果续签失败进行处理(没有)
            console.log(res)
          }).finally(res => {
            // 无论是否获取成功或者失败 都需要把状态位重置
            isReFresh = false
          })
        }
      }
    }

    // do something before request is sent
    // 从store里面获取token，如果token存在，
    // 把token添加到请求的头部Headers里面
    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      // 把token添加到请求的头部
      //! config是发送的数据 headers是axios请求头 Authorization是后端接口判断token的属性名
        config.headers['token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

/**
 * @author: 刘凯利
 * @day: 2022.2.11
 */
import { constantRoutes } from '@/router'
//! 获取的用户权限合集
import { getrolesList } from '@/api/user'
import { Message } from 'element-ui'
import Layout from '@/layout'

/**
 * 获取后端分配好的路由权限替换简键名渲染路由
 * @param {Array} routes 是一个空数组 用来储存处理完毕后的路由集合
 * @param {data} data 后端返回的未经处理的全部路由权限集合
 * @Notice page_key是路径 level是层级一般判断是否为菜单 并且可以判断是否在面包屑打开(菜单肯定不能打开) type判断是否隐藏菜单
 */
export function filterAsyncRoutes (routes, data) {
  // 进行路由权限的拼接
  data.forEach(item => {
    // 截取最后/的内容 用来设置Vue的nama属性
    const name = item.page_key.substring(item.page_key.lastIndexOf('\/') + 1, item.page_key.length)
    // 地址重定向
    let redirectUrl = ''
    // 判断是否存在子菜单
    if (item?.children) {
      // 如果存在 重定向到第一个子菜单中
      redirectUrl = item.children[0].page_key
    }
    // 创建路由的集合对象
    const menu = {
      // 页面路径
      path: item.page_key,
      // 判断是是否为菜单(无论如何leave为1肯定为菜单) resolve必须要加 必须使用CommonJS导入方式 不可以使用es6 import
      component: item.level === 1 && item.new_page === 0 ? Layout : resolve => { require(['@/views' + item.page_key], resolve) },
      // name截取后取首位大写(依据Vue的name进行处理设置)
      name: name.slice(0, 1).toUpperCase() + name.slice(1),
      // 判断菜单重定向
      redirect: item.level === 1 ? redirectUrl : '',
      // 判断是否隐藏
      hidden: item.type !== 1,
      // 是否唯一显示(有待配置)
      alwaysShow: false,
      // 路由meta中的内容
      meta: {
        // 如果是菜单 进行隐藏处理
        breadcrumb: item.level === 1,
        // 菜单标题
        title: item.name,
        // 菜单svg图像
        icon: item.icon,
        // 取消缓存 (根据需求)
        noCache: true
      },
      // 准备子节点容器
      children: []
    }
    // 判断是否含有子节点
    if (item.children) {
      // 如果含有子节点 提取出子节点容器 并拿到数据的子节点再次进行添加
      filterAsyncRoutes(menu.children, item.children)
    }
    // 把集合对象添加到路由集合中
    routes.push(menu)
  })
  // 返回整理好的动态路由数据
  return routes
}

const state = {
  routes: [],
  // 动态路由的权限
  addRoutes: [],
  // 元素(按钮)的权限
  roles: []
}

const mutations = {
  // 元素权限
  SET_ROLES: (state, roles) => {
    state.roles = roles
    // console.log(roles)
  },
  // 路由权限
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    // 把过滤出来有权限的路由添加到不需要权限的路由里面去
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  /**
   * 获得后端权限集合 包含未经处理的路由权限集合 和 处理好的页面元素权限字段
   */
  generateRoutes ({ commit }, state) {
    return new Promise((resolve, reject) => {
      // 存的是有权限的路由，是一个数组
      getrolesList().then(res => {
        console.log('3.获取用户权限路由')
        console.log(res)
        // 声明一个变量 接收方法返回的动态路由
        let accessedRoutes
        if (res.code == 200 || res.code == 20000) {
          //! 储存元素权限
          const roles = res.data.permission_list
          // 如果是空权限 那么往里面添加null字段
          if (roles.length === 0) {
            roles.push('null')
          }
          // 把元素(按钮)权限储存到session中
          sessionStorage.setItem('codeList', JSON.stringify(roles))
          // 在Vuex中储存元素权限
          commit('SET_ROLES', roles)
          //! 遍历路由权限
          // 设置空的数组 传递给方法
          const ret = []
          // 把动态路由遍历后储存
          accessedRoutes = filterAsyncRoutes(ret, res.data.permission_tree)
          console.log(accessedRoutes)
          // 还缺少404页面 单独配置并push到动态路由中
          const asyncRoutes = { path: '*', redirect: '/404', hidden: true }
          // 把404页面push到动态路由里面 (注意一定要加到末尾 不能使用unshift)
          accessedRoutes.push(asyncRoutes)
        } else {
         Message.error('获取动态路由失败')
        }
        // 在Vuex中储存动态路由
        commit('SET_ROUTES', accessedRoutes)
        // 返回动态路由
        resolve(accessedRoutes)
      }).catch(error => {
        reject(error)
        Message.error('获取动态路由失败')
      })
    })
  }
}

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

LKaiLi

RABC权限学习记录文档

RABC权限学习记录文档

# 权限流程图

# 权限学习地址

# 权限准备工作

# 第一阶段: 路由权限的实现

# 机构管理模块(非代码)

# 权限管理(非代码)

# 角色管理

# 分配权限思路

# 分配权限递归代码

# 权限分配提交按钮

# 用户管理 (非代码)

# 用户管理左侧菜单

# 用户管理右侧菜单

# 用户管理右侧菜单分配角色展示效果

# 第二阶段: 按钮权限 (元素权限)的实现

# 退出功能

# token续签两种实现方式

# 双token续签机制

# 单token时间戳续签机制

# 记录公司的权限处理

# 备注