今天研究了後臺管理的頁面啟動順序，好奇是怎麼進入login.vue的，一直沒找到，快要放棄的時候，發現了新大陸。

和其他VUE專案一樣，此專案使用的是單頁面應用，只有一個頁面index.html,  在頁面啟動的時候，會載入APP.vue,

1.啟動載入app.vue

載入app.vue的原因是在main.js中配置了啟動的時候載入app.vue,   

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 'element-ui/lib/theme-chalk/index.css'

import '@/styles/index.scss' // global css

import App from './App'
import router from './router'
import store from './store'

import i18n from './lang' // Internationalization
import './icons' // icon
import './errorLog' // error log
import './permission' // permission control
import './mock' // simulation data

import * as filters from './filters' // global filters

Vue.use(Element, {
  size: Cookies.get('size') || 'medium', // set element-ui default size
  i18n: (key, value) => i18n.t(key, value)
})

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

Vue.config.productionTip = false

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

   main.js在全域性配置檔案webpack.base.conf.js中進行了載入了配置

  2. 載入登陸頁

    令人困惑的是App.vue頁面中並沒有指定載入login.vue，為什麼在頁面啟動的時候會跳轉到login.vue,這要歸功於路由

   首先我們看下App.vue頁面

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default{
  name: 'App'
}
</script>
 

  App.vue中的router-view大家可以瞭解下，載入VUE頁面。

 正常情況下頁面的執行邏輯是這樣的，啟動的時候預設載入的是dashboard頁面，大家可以看下router/index.js檔案的配置，

為什麼會載入這個頁面，是因為有一個很重要的屬性 redirect: '/documentation/index',  部分程式碼如下

 {
    path: '',
    component: Layout,
    redirect: 'dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
      }
    ]
  },
 

  然後啟動的時候會在permission.js檔案中判斷，如果沒有許可權，貨主沒有登入，就會轉到首頁，permission.js程式碼如下

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// progress bar style
import { getToken } from '@/utils/auth' // getToken from cookie

NProgress.configure({ showSpinner: false })// NProgress Configuration

// permission judge function
function hasPermission(roles, permissionRoles) {
  if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
  if (!permissionRoles) return true
  return roles.some(role => permissionRoles.indexOf(role) >= 0)
}

const whiteList = ['/login', '/auth-redirect']// no redirect whitelist

router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
  //alert(to.path);
  if (getToken()) { // determine if there has token
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
    } else {
      if (store.getters.roles.length === 0) { // 判斷當前使用者是否已拉取完user_info資訊
        store.dispatch('GetUserInfo').then(res => { // 拉取user_info
          const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 根據roles許可權生成可訪問的路由表
            router.addRoutes(store.getters.addRouters) // 動態新增可訪問路由表
            next({ ...to, replace: true }) // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          })
        }).catch((err) => {
          store.dispatch('FedLogOut').then(() => {
            Message.error(err || 'Verification failed, please login again')
            next({ path: '/' })
          })
        })
      } else {
        // 沒有動態改變許可權的需求可直接next() 刪除下方許可權判斷 ↓
        if (hasPermission(store.getters.roles, to.meta.roles)) {
          next()
        } else {
          next({ path: '/401', replace: true, query: { noGoBack: true }})
        }
        // 可刪 ↑
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) { // 在免登入白名單，直接進入
      next()
    } else {
      next(`/login?redirect=${to.path}`) // 否則全部重定向到登入頁
      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
    }
  }
})

router.afterEach(() => {
  NProgress.done() // finish progress bar
})

   permission.js會在main.js中使用，所有理所當然的會進行判斷。