vue-element-admin记录

入口：main.js

这里将App.vue、store、router、permission.js(router的权限拦截器)、filter等都融合在一起。

这个vue的filter与router的interceptor都是在文章中没有看到的，后边需要再看一下。

router

下边依据router为主线来看看。router中展示了3种用法：

constRoutes用法

在router的index中，通过constRouters将不需要权限控制的页面都放在这里。
将router切分成小module的用法

这一步其实挺常见，当route太长时，用这种方法做个切分，阅读代码更好一些。
asyncRoutes用法

根据不同permission来看到不同路由的用法，这里来细看一下。
- 首先在这里定义asyncRoutes路由(路由中通过meta.roles来定义该路由需要的角色)，但并不是直接往router中创建。
- 然后在store的Permission中定义actions，传入用户有的角色，并根据角色对路由进行过滤，最后通过mutations改变state.routes，将const与async合并在一起。
- 最后在permission.js的守卫中，先通过触发store.dispatch('user/getInfo')来获取到用户的角色，然后通过 store.dispatch('permission/generateRoutes', roles)，获取受限可方位的路由，最后通过router.addRoutes(accessRoutes)，将路由放入router中，完成整个功能

store

在这里看到了2个store的module：user与permission，我们来看看这2个store。先来看看permission。

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

const state = {
  routes: [],
  addRoutes: []
}

在permission的store中，有2个状态：全部的routes，与异步的addRoutes。

再来看看user：

const state = {
  token: getToken(),
  name: '',
  avatar: '',
  introduction: '',
  roles: []
}

这里将token、name、avatar、introduction、roles都放在了其中。

action包括：

const actions = {
    login({ commit }, userInfo) {
        // 省略
    },
    
      getInfo({ commit, state }) {
          // 省略
      },
    
  	logout({ commit, state, dispatch }) {
	      // 省略
  	},
    
     resetToken({ commit }) {
         // 省略
      },
    
  	 async changeRoles({ commit, dispatch }, role) {
      	// 省略
  	}
}

在changeRoles中，重新创建了router，重新创建了获取了role以及accessRoutes等。

axios

顺着store，我们来看看api，我们以user的getInfo为例：

export function getInfo(token) {
  return request({
    url: '/vue-element-admin/user/info',
    method: 'get',
    params: { token }
  })
}

这里调用的是utils中的request。

在这里创建了axios的示例，也就是request。在创建后，增加service.interceptors.request与service.interceptors.response2个拦截器，前者用于增加token，后者用于包括错误的处理等。

通过返回值，判断// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;，等重新对token进行处理。

view

下边再从router出发，来看看view。

Layout

这里有：

export { default as AppMain } from './AppMain'
export { default as Navbar } from './Navbar'
export { default as Settings } from './Settings'
export { default as Sidebar } from './Sidebar/index.vue'
export { default as TagsView } from './TagsView/index.vue'

布局是与element-ui布局容器的倒数第二个类似包括着Sidebar(el-aside)，Navbar(el-header)，AppMain(el-main)。

在最外层的index中，包括sidebar、navbar、tags-view、app-main、settings等内容。

在AppMain中，通过router-veiw进行了占位。并且使用keep-alive与transition。

Sidebar有些复杂：

外层通过el-menu来进行控制，内层做了一个sidebar-item的组件，在这个组件中，有递归，判断是否有showingChild，进行相应的显示，这里它在v-if中写了一段逻辑，很丑。在Link组件中通过componet :is="type" 做了一个动态组件，这个挺有意思。

Navbar中比较简单：

按顺序为hamburger、breadcrumb、right-menu等内容。

这里对hamburger怎么换的箭头没有看明白。

Dashbord

下边来看看Dashbord。

在index中做了一个动态组件，判断roles中是否有admin来渲染editorDashboard。

Dashbord中包括4个指标+1个折线图，3个图表（雷达图、pie图、柱状图），1个Table，1个TodoList。