前端在后台管理系统中实现权限控制思路

伪代码记录一下开发后台系统的权限控制思路

1.创建路由时分为常量路由和异步路由。

• 常量路由：不需权限访问的登录页等，createRouter时只创建此常量路由。
• 异步路由：需权限控制菜单。通过meta设置对应标识

2.在router.beforeEach路由前置钩子中进行权限控制

// 白名单
const whiteList = ['/login']

// 是否有token   登录时将后端返回的userToken保存到cookie中(js-cookie插件)
if(hasToken) {
  if(whiteList.includes(to.path)) {
    next()
  } else {
    // 是否有获取过用户信息
    if(hasUserInfo) {
      next()
    } else {
      try {
        await getUserInfo()
        // await getRoleInfo()  细分角色管理，不同的角色访问同一个页面，控制其增删改查等操作
        // 从后端获取当前用户能访问的菜单
        const menuInfo = await getMenuInfo()
        // 根据后端返回的菜单，匹配出对应的路由(比对meta标识)
        const accessRoutes = await dispatch('generateRoutes', menuInfo)
        // 添加路由
        router.addRoutes(accessRoutes)
        next({...to, replace: true})
      } catch (err) {
        // 重置token
        await dispatch('resetToken')
        next('/login')
      }
    }
  }
} else {
  if(whiteList.includes(to.path)) {
    next()
  } else {
    next('/login')
  }
}