vue-element-admin权限管理&动态路由配置

vue-element-admin模板地址

需求: 调用登陆接口之后 后台传递路由数据给前端 进行动态创建和显示

问题: 各种问题 主要是不清楚这个模板的默认权限动态传递的配置

用到的核心文件地址

src/router/index.js                     路由
src/store/modules/user.js               用户登录，用户信息、路由信息传递
src/permission.js                       信息传递（user -> permission 的中间商）  之前就是一直没注意到这个 导致一直弄不好
src/store/modules/permission.js         权限获取&配置

src/router/index.js 路由配置

constantRoutes: 不需要动态判断权限的路由 eg：登陆、404等通用页面
asyncRoutes：需要动态判断权限并通过addRoutes动态添加的页面

需要把动态路由先配置好 ‘permission’ 权限要写好
到时候才能正确的获取和显示相应的权限

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

export const asyncRoutes = [
  //  待审核
  {
    path: '/toPend',
    component: Layout,
    redirect: '/toPend',
    permission: 'toPend',
    title: '待审核',
    children: [
      {
        permission: 'toPend',
        path: '/toPendIndex',
        component: () => import('@/views/toPendManagement/toPendIndex'),
        name: 'toPend',
        meta: {
          title: '待审核',
          icon: 'form',
          noCache: false // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
        }
      }
    ]
  },
  ....
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]
const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

src/store/modules/user.js 用户登陆获取数据

/*
  正常流程是在login接口获取到 token，存在vuex中 供登陆
  然后在getInfo接口获取到 路由和用户信息 存储并发送出去 供路由的动态配置

  但是 我们这个项目把getInfo接口取消了 在login接口就直接获取到路由信息
  本来是不需要自己封装info数据的
*/
const actions = {
  // user login
  login({commit}, userInfo) {
    const { username,password } = userInfo
    return new Promise((resolve, reject) => {
      login({ account: username.trim(), password: password }).then(response => {
        const {
          data
        } = response
        // 存储到cookie中 ！很重要 不然登陆不了 接口在 src/utils/auth.js
        setToken({ username: 'admin', password: 'admin' })  
        var info = { username: 'admin', password: 'admin', roles: ['admin'], routes: data.permission } 
         commit('SET_TOKEN', info)  // 存储到 vuex 中 数据格式如上 ↑ 
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
  getInfo({ commit,state }) {
  return new Promise((resolve) => {
      // 可以把这三个写在 info 中 从info里获取
      const roles = 'admin'
      const name = 'Super Admin'
      const avatar = 'http://pic.51yuansu.com/pic3/cover/03/47/85/5badd30d6526d_610.jpg'
      commit('SET_ROLES', roles)
      commit('SET_NAME', name)
      commit('SET_AVATAR', avatar) // 存储在cookie中
      resolve(state.token)  // 发送 info 值 ，传递给 permission
     })
  },
  // get user info 如果是有info接口的传递方法
  /* getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response
        if (!data) {
          reject('Verification failed, please Login again.')
        }
        const { roles, name, avatar } = data
        // roles must be a non-empty array
        if (!roles || roles.length <= 0) {
          reject('getInfo: roles must be a non-null array!')
        }
        commit('SET_ROLES', roles)
        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        console.log(data)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  }, */
  ......
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

src/store/modules/permission.js 权限获取

/*
  本来是根据角色roles权限过滤路由,并显示到侧边栏
  roles.
  但是现在是不根据权限 而是后台传递的路由信息 所以不用判断权限 修改为
  */
const actions = {
  generateRoutes({ commit }, userinfo) {
    return new Promise(resolve => {
       const strRoutes = JSON.stringify(userinfo.routes)
       const accessedRoutes = filterAsyncRoutes(asyncRoutes, strRoutes) //路由的过滤器 获取相同的路由
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

src/permission.js 用户信息传递&配置路由

首先确定userinfo需要的格式 就是getInfo函数传递过来的 resolve(state.token)

path对应的是路由中的permission

router.beforeEach(async(to, from, next) => {
  if (hasToken) {
    if (to.path === '/login') {
     ...
    } else {
      // determine whether the user has obtained his permission roles through getInfo
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        next()
      } else {
        // 登录后会走这里获取roles
        try {
          // get user info
          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
          const userinfo = await store.dispatch('user/getInfo') //获取用户信息
          // 调用store下module下的permission文件中的generateRoutes方法
          const accessRoutes = await store.dispatch('permission/generateRoutes', userinfo) // 获取动态路由
          // dynamically add accessible routes 显示获取到的侧边栏
          router.addRoutes(accessRoutes)  //创建路由

          next({ ...to, replace: true })
        } catch (error) {
          ...
        }
      }
    }
  }

被遗漏的BUG

描述： 登录完成之后，进入操作页面 刷新 又需要重新登录

原因： 之前这个模板是调用的getInfo接口获取、存储路由信息
页面刷新之后 再次调用接口即可获取到路由等信息

但是我们把getInfo接口废弃了 路由信息是登陆的时候获取
存在vuex中 在getInfo函数内直接使用的vuex存储的数据 并发布出去

原因就在于 vuex刷新之后 数据就清空了！所以又需要重新登录 获取路由等信息。

解决:
在login登陆接口之后获取到路由数据
通过sessionStorage / localStorage 存放在本地
然后在使用 getInfo 函数的时候 不从vuex内获取 从 sessionStorage / localStorage 获取并发送

注意：在退出登陆的时候 即调用logout接口之前要通过.removeItem()进行删除操作 不然不能正常退出登陆