vue后台管理系统权限处理

vue后台管理系统权限

1.权限问题：用户和管理员进入管理系统看到的模块是不一样的，管理员看的的要比用户看到的多。需要用到动态加载路由，router.addRouters()来动态的挂载路由

// 1.先登录将获取到的用户的token存储起来

// store/index.js

// 封装的api接口方法
import { getLogin, getUserInfo } from '../api/index'

state: {
    roles: [],
    token: window.localStorage.getItem('token') || ''
},

mutations: {

    // 将获取到的token存储到本地
    SET_TOKEN (state, token) {
      state.token = token
      window.localStorage.setItem('token', state.token)
    }
},

actions: {

   userLogin ({ commit }, userInfo) {

      // 返回一个异步回调，promise
      return new Promise((resolve, reject) => {

        // 调用封装好的请求数据的方法
        getLogin(userInfo).then(res => {
          const data = res.data
          if (data.code === 200) {

            // 调用mutations中的方法，将token存储到本地中
            commit('SET_TOKEN', data.token)
          }
          resolve(res.data)
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 根据用户的token获取用户的个人信息，里面包含了权限信息

    getUserInfo ({ state }) {

        // 返回一个异步回调，promise
      return new Promise((resolve, reject) => {

        // 调用接口方法获取数据
        getUserInfo(state).then(res => {

            // 将获取到的信息放到数组中存储
          state.roles.push(res.data)
          resolve(res.data)
        }).catch(error => {
          reject(error)
        })
      })
    }
}

// 在login/index.vue中使用，点击按钮触发
userLogin () {

      this.$store.dispatch('userLogin', this.userInfo).then(res => {
        // 登陆成功跳转主页
        this.$router.push('/home')
      }).catch(error => {
        console.log(error)
      })
}

// vuex的计算属性

getters: {
    // 将用户数据放到计算属性中，一旦数据发生变化，可以重新计算
    roles (state) {
      return state.roles
    },
    token (state) {
      return state.token
    }
},

// 权限模块的处理

// router/index.js

// 路由中的配置

// 静态路由，没有权限的所有用户都可以看到

// 引入登陆页面
import Login from '../views/Login'

export const staticRoutes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/Home')
  }
]

// 异步（动态）挂载的路由，根据权限展示
export const asyncRouteMap = [
  {
    path: '/details',
    name: 'details',
    component: () => import('../views/Details'),
    meta: {
      role: ['admin', 'super_editor'] // 页面需要的权限
    },
    children: [
      {
        path: 'index',
        name: 'index',
        component: () => import('../views/Details/Child'),
        meta: {
          role: ['admin', 'super_editor'] // 页面需要的权限
        },
        children: [
          {
            path: '/next',
            name: 'next',
            meta: {
              role: ['admin', 'super_editor'] // 页面需要的权限
            }
          }
        ]
      }
    ]
  },
  {
    path: '/error',
    component: () => import('../views/404'),
    name: 404
  },
  { path: '*', redirect: '/error', hidden: true }
]

// 因为可以动态的挂载路由，但是不能动态删除路由。所以才考略到，
// 在需要动态清空动态挂载路由的话，直接将一个新的路由对象赋值给旧的路由对象，这样就可以达到动态清除的工作

const createRouter = () => new VueRouter({
  scrollBehavior: () => ({ y: 0 }),
  routes: staticRoutes
})

const router = createRouter()

// 调用该方法动态清除动态挂载路由
export function resetRouter () {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

// store/permission.js

// 引入权限路由，和公共路由
import { staticRoutes, asyncRouteMap } from '../router/index' 

// 用来筛选后端返回来的权限数据，和权限路由中的meta里面的数据匹配，匹配成功返回true，失败为false

function hasPerMission (roles, route) {
  if (route && route.meta.role) {
    return roles.some(role => route.meta.role.indexOf(role) >= 0)
  } else {
    return true
  }
}

const permission = {
  state: {
    routers: staticRoutes,
    addRouters: []
  },
  mutations: {

    // 将匹配成功的权限路由拼接到公共路由中
    SET_ROUTERS (state, routers) {
      state.addRouters = routers
      state.routers = staticRoutes.concat(routers)
    }
  },
  actions: {

    // 对后台返回来的权限和动态路由权限匹配
    GenerateRoutes ({ commit }, data) {

        // 返回一个异步回调promise
      return new Promise((resolve, reject) => {

        // 遍历权限路由数组
        const accessedRoutes = asyncRouteMap.filter(v => {

            // 判断如果后台返回的权限中包含admin就是管理员，可以进入权限路由页面
          if (data.indexOf('admin') >= 0) return true

           // 之后就是调用hasPerMission函数对象权限动态路由和后台返回的用户权限进行严格匹配
          if (hasPerMission(data, v)) {

            // 判断是否有权限路由是否有子路由，有子路由继续遍历
            if (v.children && v.children.length > 0) {
              v.children = v.children.filter(child => {

                // 对权限子路由和后台返回的用户权限数据，在进行匹配，匹配成功返回
                if (hasPerMission(data, child)) {
                  return child
                }

                // 失败返回false
                return false
              })

                // 并且要把权限的父路由返回来，不光要把权限子路由返回，无论权限子路有还是没有，都应该把权限父路由返回来
              return v
            } else {

                // 权限父路由匹配成功返回
              return v
            }
          }

           // 如果每一个判断都没有进，说明该用户没有任何权限，返回false
          return false
        })
        commit('SET_ROUTERS', accessedRoutes)
        resolve()
      })
    }
  },
  getters: {

    // 只要权限路由数组发生变化就重新计算
    addRouters (state) {
      return state.addRouters
    }
  }
}
export default permission

// 在store/index.js

// 引入另一个模块使用
import permission from './permission'

modules: {

    // 我们还需要用到另一个模块配合完成
    permission
}

// 之后创建一个js文件单独放到全局路由导航，之后在main.js中引入执行

// gloab/index.js

// 先把路由和vuex引进来使用
import router from '../router'
import store from '../store'

const whiteList = ['/login'] // 不重定向白名单

router.beforeEach((to, from, next) => {
  if (store.getters.token) {
    // 判断如果是去登陆页面的话，返回主页，不让他返回登录页
    if (to.path === '/login') {
      next({ path: '/home' })
    } else {
      // 否则判断一下用户的个人信息是否已经拉取完毕
      if (store.getters.roles.length === 0) {
        // 拉取用户个人信息
        store.dispatch('getUserInfo').then(res => {
          // 拿到用户后台返回的权限数据
          const roles = res.role
          // 调用 permission.js方法中的GenerateRoutes方法，将后台返回的用户的权限数据，传递回去进行筛选处理
          store.dispatch('GenerateRoutes', roles).then(() => { // 生成可访问的路由表
            // 将筛选的权限路由数组动态挂载
            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes添加完成
          })
        }).catch(error => {
          console.log(error)
          // 验证失败重新登陆
          next({ path: '/login' })
        })
      } else {
        next() // 当有用户权限的时候，说明所有可访问路由已生成 如访问没权限的页面会自动进入404页面
      }
    }
  } else {
    // 如果已经去了登陆页面了，就不需要再next到登陆页面了，这就是重定向白名单
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login') // 否则全部重定向到登录页
    }
  }
})