vue-element-admin 项目运行流程梳理

前言

没有看过整个同学不推荐看这篇文章，如果对项目没有一个大致了解的花，你会感觉云里雾里

下面就是流程梳理：

我这里就直接开是往下写了，不搞花的：

1. 当我们运行npm run dev后自然是开始运行整个项目了，运行的入口在哪？此时我们肯定就想到main.js，没错项目的入口就是main.js,接下来我们看看main.js的代码：

import Vue from 'vue'
import Cookies from 'js-cookie'
import 'normalize.css/normalize.css' // a modern alternative to CSS resets
import Element from 'element-ui'
import './styles/element-variables.scss'
import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖
import '@/styles/index.scss' // global css
import App from './App'
import store from './store'
import router from './router'
import './icons' // icon
import './permission' // permission control
import './utils/error-log' // error log
import * as filters from './filters' // global filters

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
if (process.env.NODE_ENV === 'production') {
   
  const {
    mockXHR } = require('../mock')
  mockXHR()
}

Vue.use(Element, {
   
  size: Cookies.get('size') || 'medium', // set element-ui default size
  locale: enLang // 如果使用中文，无需设置，请删除
})

// register global utility filters
Object.keys(filters).forEach(key => {
   
  Vue.filter(key, filters[key])
})

Vue.config.productionTip = false

new Vue({
   
  el: '#app',
  router,
  store,
  render: h => h(App)
})

其实跟其他项目一样。main.js的主要作用都是挂载app,但这里需要你注意一下的是import './permission' // permission control，这项代码的作用是引入了下面的代码，作用是对我们全局的路由访问进行限制，只有满足了特点给条件才能进行相应的页面跳转，具体作用开下面的代码：

// 这里是白名单，也就是说还没登陆获取token时可以访问的页面
const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist

//这里是全局路由守卫
router.beforeEach(async(to, from, next) => {
   
  // 从cookie中取得token
  const hasToken = getToken()
  
  // 如果有token 也就是已经登陆的情况下
  if (hasToken) {
   
    // 并且要前往的路径是'/login'  则返回 '/' 
    if (to.path === '/login') {
   
      next({
    path: '/' })
    } else {
   
      // 从store中取得用户的 roles, 也就是用户的权限 并且用户的权限数组必须有一个以上
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      // 有权限则直接进入
      if (hasRoles) {
   
        next()
      } else {
   
        // 没有权限的话
        try {
   
          // 获取用户信息
          const {
    roles } = await store.dispatch('user/getInfo')
          // 生成可访问路由
          const accessRoutes = await store.dispatch('permission/generateRoutes',                                  roles)
          // 将可访问路由添加到路由上
          router.addRoutes(accessRoutes)
          // 进入路由
          next({
    ...to, replace: true })
        } catch (error) {
   
          // 如果出现异常  清空路由 
          await store.dispatch('user/resetToken')
          // Message提示错误
          Message.error(error || 'Has Error')
          // 跳到login页面重新登陆
          next(`/login?redirect=${
     to.path}`)
        }
      }
    }
  } else {
   
    // 没有token 也就是没有登陆的情况下  
    // 判断是否是白名单(也就是说不需要登陆就可以访问的路由)
    if (whiteList.indexOf(to.path) !== -1) {
   
      next()
    } else {
   
      // 其他的一律给我跳到login页面 老老实实的进行登陆
      next(`/login?redirect=${
     to.path}`)
      NProgress.done()
    }
  }
})

2. main.js挂载完了就开始显示页面，显示那个，看路由router的默认路由

  {
   
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
   
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index')
      }
    ]
  },

这里其实就是要先是我们的默认路由可是能显示吗？忘记了我们上面所说的premission了吗？我们有taken吗显然是没有的，所以我们就得跳转到我们的登陆页面：

3. 登陆页面中的表单验证这些我就不讲了，毕竟我这里分析的是项目的运行流程