今天研究了后台管理的页面启动顺序，好奇是怎么进入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中使用，所有理所当然的会进行判断。
