vue-element-admin记录

入口:main.js

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

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

router

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

  1. constRoutes用法

    在router的index中,通过constRouters将不需要权限控制的页面都放在这里。

  2. 将router切分成小module的用法

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

  3. 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。

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×