对花裤衩大叔vue-element-admin后台项目的学习

前言

预览地址：https://panjiachen.gitee.io/vue-element-admin/#/dashboard
GitHub地址：https://github.com/PanJiaChen/vue-element-admin
文档地址：https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

技术点

看vue-element-admin代码，学到的逻辑点。

1. 路由权限生成，src目录下的permission.js文件

// 顶部进度条配置
NProgress.configure({ showSpinner: false }) // NProgress Configuration
// 白名单，无需进行路由权限控制，即可访问。
const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist

然后接下来就是全局路由导航守卫的逻辑

  // 展示进度条
  NProgress.start()
  // 设置当前路由标题
  document.title = getPageTitle(to.meta.title)
  // 获取token
  const hasToken = getToken()

• 如果token有值

// 如果访问的是登录路由
    if (to.path === '/login') {
    // 重定向到首页
    next({ path: '/' })
      NProgress.done() 
    }

2. 有路由表的情况下

else {
// 从vuex中取出role路由表，如果之前缓存过路由表直接跳转
  const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        next()
  } 

3. 无路由表的情况下，一般为初次访问。
   先通过vuex请求处理，得到登录用户的标识，如admin、editer等

const { roles } = await store.dispatch('user/getInfo')

4. 这是生成路由表的处理，通过获取的用户标识，来动态生成相应的路由表。

 const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

5. 找到permission.js下的generateRoutes方法。
   大概思路就是如果是admin，所有路由返回，如果是其他，通过递归去遍历每个路由是否有权限访问，然后返回。

  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes || []
      } else {
      // filterAsyncRoutes是递归查找路由
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

filterAsyncRoutes(routes, roles) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })
  return res
}

6. 然后通过router.addRoutes动态添加生成的路由表。

router.addRoutes(accessRoutes)

7. 最后通过执行
   …to :确保addRoutes已完成
   replace : 路由是否可返回

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

• 如果token没有值
  先判断是否存在白名单中，有则直接跳转访问，没有则重定向到登录页面。

    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }

2. vuex中工程化导入文件
将modules下的文件自动导入，并挂载到store上
https://webpack.js.org/guides/dependency-management/#requirecontext

// 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
})

3. 路由表‘
constantRoutes 和 asyncRoutes 俩个路由数组，分别为公共路由和动态路由。
公共路由即没有权限控制，随便访问。
动态路由即根据登录用户权限动态生成对应的路由。