vue element UI 学习总结笔记（九）

获取用户信息

我们把 login和get_user_info两件事分开处理,我们在守卫路由中获取路由信息。

router.beforeEach((to, from, next) => {if (!(store.getters.savestate === 0)) {Message({showClose: true,message: '正在编辑状态中,请先保存',type: 'error'})next(false)return}NProgress.start()// 如果已经获取了tokenif (getToken()) {// 如果将要跳转到的页面是/loginif (to.path === '/login') {// 那么就直接调转到/next({ path: '/' })// 进度条结束NProgress.done() // if current page is dashboard will not trigger   afterEach hook, so manually handle it} else {// 如果角色长度为零，即没有获取到角色// 判断当前用户是否已拉取完user_info信息if (store.getters.roles.length === 0) {// 调用action派遣事件发送请求获取用户信息（包括角色权限）。store.dispatch('GetInfo').then(res => { // 拉取用户信息// const roles = res.data.rolesconsole.log('菜单树信息为：', res.data)var { admdivcode, admdivname, year, name, businessNb, officename } = res.data// 以后接口字段待调整。businessNb = '001财政局非税'var userInfo = { admdivcode, admdivname, year, name, businessNb, officename }store.dispatch('SetUserInfo', userInfo)store.dispatch('SetAllUserInfo', res.data.userinfo)store.dispatch('GenerateRoutes', res.data).then(() => { // 生成可访问的路由表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) => {// getInfo的api报错时，打印错误并返回根目录。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 {// 如果没有获取到token，但是要跳转的页面在白名单中。if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入next()} else {// 如果没有获取到token，且要跳转的页面不在白名单中。// next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页,且记住之前的页面。next(`/login`) // 否则全部重定向到登录页,且记住之前的页面。NProgress.done()}}
})

后台数据库存储的资源（菜单）信息

上图中，资源编码（如 zcgl_wjgl）等是构成前端页面路由的基础。

我们会从后端/user/info 获取用户信息：返回的结构结构如下：

{"code": "200","data": {"userShortcut": [],"year": "2019","roles": ["admin"],"admdivcode": "420000","menutree": [.....],"version": "2020","oldYear": false,"admdivname": "省本级","officename": "**局","name": "**","setid": "1234","officecode": "80","usercode": "8043","userinfo": {"passwordquestion": null,"nid": "DCBFA88EF11C4D7AB2DD56AD06C9688B","oid": "80","cid": null,"guid": "DCBFA88EF11C4D7AB2DD56AD06C9688B","year": "2019","admdivcode": "420000","pername": "**",......"clientType": "1","admdivname": "省本级","officename": "**局","officecode": "80","ishall": null,"mack": "2020","setid": "1234"},"username": "**"}
}

其中，形成菜单的节点为：

     "menutree": [{},{"id": "402880b3348289190134835596f700ec","text": "政策法规管理","state": null,"checked": false,"attributes": {},"children": [{"id": "402880b33482891901348355d21c00ee","text": "政策法规文件管理","state": null,"checked": false,"attributes": {"butns": ["/zcfggl/zcfgwjgl/add", "/zcfggl/zcfgwjgl/delete", "/zcfggl/zcfgwjgl/update", "/zcfggl/zcfgwjgl/upload", "/zcfggl/zcfgwjgl/download", "/zcfggl/zcfgwjgl/print", "/zcfggl/zcfgwjgl/set", "/zcfggl/zcfgwjgl/export"]},"children": [],"parentId": "402880b3348289190134835596f700ec","hasParent": true,"hasChildren": false,"icon": "i-zcfgwjgl","btn": false,"menuId": "/zcfggl/zcfgwjgl","levelnum": 0}, {"id": "402880b334828919013483561add00f0","text": "政策法规文件查询","state": null,"checked": false,"attributes": {"butns": ["/zcfggl/zcfgwjcx/print", "/zcfggl/zcfgwjcx/set", "/zcfggl/zcfgwjcx/export"]},"children": [],"parentId": "402880b3348289190134835596f700ec","hasParent": true,"hasChildren": false,"icon": "i-zcfgwjcx","btn": false,"menuId": "/zcfggl/zcfgwjcx","levelnum": 0}, {"id": "402880b334828919013483565ff500f2","text": "非税收入项目库查询","state": null,"checked": false,"attributes": {"butns": ["/zcfggl/fssrxmkcx/print", "/zcfggl/fssrxmkcx/set", "/zcfggl/fssrxmkcx/export"]},"children": [],"parentId": "402880b3348289190134835596f700ec","hasParent": true,"hasChildren": false,"icon": "i-fssrxmkcx","btn": false,"menuId": "/zcfggl/fssrxmkcx","levelnum": 0}, {"id": "402880b33482891901348357ddab00f6","text": "单位非税收入项目查询","state": null,"checked": false,"attributes": {"butns": ["/zcfggl/dwfssrxmcx/print", "/zcfggl/dwfssrxmcx/set", "/zcfggl/dwfssrxmcx/export"]},"children": [],"parentId": "402880b3348289190134835596f700ec","hasParent": true,"hasChildren": false,"icon": "i-dwfssrxmcx","btn": false,"menuId": "/zcfggl/dwfssrxmcx","levelnum": 0}],"parentId": "-1","hasParent": false,"hasChildren": true,"icon": "i-zcfggl","btn": false,"menuId": "/zcfggl","levelnum": 0},......{}],

前端根据后台泛返回的数据，构建前端菜单与路由（主要根据类似"menuId": "/zcfggl/zcfgwjgl"的节点）

router:

本段涉及：什么是路由，路由的使用步骤动态路由路由懒加载

路由是根据不同的 url 地址展示不同的内容或页面。

要使用router，必须先搞个路由地图。

静态路由：

1、定义组件

    const Foo = {template:'<div>foo</div>'};const Bar = {template:'<div>bar</div>'}

2、定义路由地图

const routes = [{path:'/foo',component:Foo,},{path:'/bar',component:Bar}];

3、根据路由地图创建路由实例：

const router = new VueRouter({routes:routes//可以简写 routes：routes})

4、路由实例注入到根实例：

    const app = new Vue({router}).$mount('#app')

5、整个应用都具有路由功能，项目可以根据自己创建的路由，导航到到不同的页面

<div id="app"><h1>hello app</h1><p><!-- 使用router-link组件来导航 --><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link></p><!-- 路由出口路由匹配到的在这里--><router-view></router-view></div>

总结一下：route 是一条路由，routes 是一组路由，router是一个机制，相当于管理者，他来管理路由

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由.

官方文档通篇都常使用 router 实例。留意一下 this.$router 和 router 使用起来完全一样。我们使用 this.$router 的原因是我们并不想在每个独立需要封装路由的组件中都导入路由。

路由的编程式导航：

静态方式下，使用router-link组件来导航，router-link根据“导航地图”，“渲染”相应router-view。

编程式导航，就是用router.push(...)代替rout-link组件，事实上，router-link其实调用的就是router.push(...)方法。

嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件.

从main.js中，可见，最外层是#app

import Vue from 'vue'
import App from './App'
......new Vue({el: '#app',router,store,render: h => h(App)
})

app.vue如下：

<template><div id="app"><!-- <div class="main-app">123</div> --><router-view/></div>
</template>
<script>
export default {name: 'App',data() {return {}}
}
</script>

从router中可见到，"/"即为Layout：

//路由
{path: '/',component: Layout,redirect: '/dashboard',name: 'Dashboard',hidden: true,children: [{path: 'dashboard',component: () => import('@/views/dashboard/index')}]
}

Layout.vue结构如下:

<template><div :class="classObj" class="app-wrapper"><div v-if="disabled" class="shield" /><div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /><head-top/><sidebar class="sidebar-container" /><div class="main-container"><navbar class="toggle-sidebar" /><app-main/></div><foot/></div>
</template><script>
import { Navbar, Sidebar, AppMain } from './components'
import HeadTop from '@/components/headTop'
import Foot from '@/components/foot'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
import Bus from '@/utils/Bus'
import { getCodeLabelDictionary } from '@/api/CommonApi'
import { getNowDate } from '@/api/login'export default {name: 'Layout',components: {Navbar,Sidebar,AppMain,HeadTop,Foot},mixins: [ResizeMixin],computed: {...},watch: {...},created() {...},methods: {...}
}
</script>
<style lang="scss">...
</style>

Layout.vue当中，可以看出，有左侧导航栏的区域了。

我们是动态路由和静态路由混用的：

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)/* Layout */
import Layout from '../views/layout/Layout'//静态路由部分
export const constantRouterMap = [{path: '/login',component: () => import(`@/views/login/index`),hidden: true
},
{path: '/404',component: () => import('@/views/404'),hidden: true
},
{path: '/',component: Layout,redirect: '/dashboard',name: 'Dashboard',hidden: true,children: [{path: 'dashboard',component: () => import('@/views/dashboard/index')}]
}
]export default new Router({// mode: 'history', //后端支持可开scrollBehavior: () => ({y: 0}),routes: constantRouterMap
})// 异步挂载的路由
// 动态需要根据权限加载的路由表
export const asyncRouterMap = [
]// component: () => import('@/components/permision'),

参考1：vue-router八个重要知识点应用图解

参考2：vue-router 基本使用

参考3：vue-router 快速入门

ps:嵌套路由与路由参数的比较，我前端同事给的解释如下：

嵌套路由的表现形式在url上是这样的： /path/pathtwo/paththree
路由参数在url上表现出是这样的： /path/pathtwo/paththree/154/887,这种形式需要在路由的path配置的时候写成 /path/pathtwo/paththree/:appid/:productid
或者以查询字符串形式带问号的那种：/path/pathtwo/paththree?appid=154&productid=887

如果路由参数以非查询字符串形式表示，确实可能和嵌套路由表现出的地址一样。但是两者在路由router中的path是完全不一样的。

如 /path/:paramsone/:paramstwo ,结果paramsone的值为'pathtwo' ,paramstwo 的值为paththree' ,那么最终的路由地址是
/path/pathtwo/paththree，
而如果此时你正好也写了一个子路由，path为：/path/pathtwo/paththree

这两个url看起来一样，但是匹配的path和组件页面是完全不一样的。前者匹配的是/path对应的页面，后面的paramsone，paramstwo 只不过是路由里面的参数。
后者匹配的就是/path/pathtwo/paththree对应的页面，且无路由参数。

参考：vue-router+vuex实现加载动态路由和菜单

1、路由什么时候什么地方从后端请求的

permission.js中有个守护路由router.beforeEach方法，是取得路由的核心代码。

ps:Promise vs permission：

Promise：a declaration or assurance that one will do a particular thing or that a particular thing will happen.es6中，用这个词表示是异步函数。

permission：consent; authorization.。

改进点：

后端返回的是该用户可访问的全部菜单，并不是全部页面的菜单。
已经与用户绑定了，所以这里的权限过滤并没有起效。
而且，后端并没有根据用户不同配置不同的角色状态，只是写死了每个登陆的用户都是admin，所以这里的else里永远不会触发，也就是这里的权限过滤还是没有使用。

这种方式是不是值得商榷呢？

2、登录跳转

验证成功就直接跳转首页，跳转的过程，就会触发Navigation Guards，Navigation Guards中，除了验证用户是否登录外，如果是首次登录，还会从后端查询用户的功能菜单，组装成前端的router.

3、路由和左边文件夹导航

如何和左边导航栏关联

导航菜单

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由.

主页面布局：

布局层次示意图：

(单页面布局示意图)

Layout的template:

AppMain.vue 右边的视图窗口

appmain 中，有router-view class="view"

element-ui菜单menu：

它有四个

el-menu
el-submenu
el-menu-item-group
el-menu-item

这里el-menu定义了当前的导航菜单及属性，
el-submenu定义了子菜单栏
el-menu-item-group定义了菜单分组我们项目暂时没用这个
el-menu-item 定义菜单项目

和router 结合，进行动态路由跳转有二种方式：

方式一：在<el-menu>里加上router属性的方式，官网描述如下：

这样就很方便，只要你<el-menu-item>里的index属性值正确就可以直接跳转了，不用再写js方法了

要理解这个element-ui 与router 形成的菜单，先看一个静态的例子：

<el-menu  router :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">  <el-submenu index="1">  <template slot="title">  <i class="el-icon-location"></i>  <span>用户信息</span>  </template>  <el-menu-item-group>  <el-menu-item index="/user/account">账号信息</el-menu-item>  <el-menu-item index="/user/password">修改密码</el-menu-item>  </el-submenu>  <el-submenu index="2">  <template slot="title">  <i class="el-icon-location"></i>  <span>公司信息</span>  </template>  <el-menu-item-group>  <el-menu-item index="/company/userManager">用户管理</el-menu-item>  <el-menu-item index="/company/editUser">添加/编辑用户</el-menu-item>  </el-menu-item-group>  </el-submenu>
</el-menu>

1.要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。

2.导航当前项，在el-menu标签中绑定 :default-active="$route.path",注意是绑定属性，不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。

方式二 利用link 或者点击事件，进行路由跳转：

我们是采取这个思路解决问题。

<template><el-scrollbar wrap-class="scrollbar-wrapper"><el-menu :show-timeout="200" :default-active="$route.path" :collapse="isCollapse" :background-color="variables.menuBg" :text-color="variables.menuText" :active-text-color="variables.menuActiveText" unique-opened mode="vertical"><sidebar-item v-for="route in permission_routers" :key="route.path" :item="route" :base-path="route.path" /></el-menu></el-scrollbar>
</template>

这里，我们看到el-menu没有router的属性了。sidebar-item 是我们自定义的一个组件。

<template><div v-if="!item.hidden&&item.children" class="menu-wrapper">
<!--如果是末级菜单，可以直接链接--><template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"><app-link :to="resolvePath(onlyOneChild.path)"><el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"><item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" /></el-menu-item></app-link></template>
<!--如果是非末级菜单的情况--><el-submenu v-else :index="resolvePath(item.path)">.......</el-submenu></div></template><script>
import path from 'path'
import { isExternal } from '@/utils/validate'
import Item from './Item'
import AppLink from './Link'export default {name: 'SidebarItem',components: { Item, AppLink },props: {item: {type: Object,required: true},isNest: {type: Boolean,default: false},basePath: {type: String,default: ''}},data() {return {onlyOneChild: null}},methods: {hasOneShowingChild(children, parent) {.......},resolvePath(routePath) {if (this.isExternalLink(routePath)) {return routePath}return path.resolve(this.basePath, routePath)},isExternalLink(routePath) {return isExternal(routePath)}}
}
</script>
<style rel='stylesheet/scss' lang='scss' scoped>
......
</style>

AppLink是我们自定义的一个带插槽的组件。插入的当然是menu_item.

ps：vue 利用component组件和is属性实现动态组件