入口: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。