重学vue 1.0

前情提要

今天的工作主要是看了一下 vue-admin-elementui的权限管理和路由设计，在这个基础上，正好可以把昨天所学习的充足进行了解一番

我们这里主要来解析一下登陆、和路由管理主流程

1、启动登陆流程

src/views/login/index.vue 在登陆中使用 this.$store.dispatch('user/login') vuex 和 js-cookie 来保存一个登陆态

commit('SET_TOKEN', data.access_token)
setToken(data.access_token)

随后，会进入到 permission.js 中，进行路由处理和分发，在这里 可以看到

router.beforeEach 也就是路由全局前置守卫，在这其中，会针对角色进行花样处理，我们简单来看下几个函数

• router.addRoutes(accessRoutes)

addRoutes , 我们可以参加文档v1简要明白得出, 通过这个api可以动态的进行添加路由

• generateRoute

从这一部分代码基本可以看出

if (roles.includes('admin')) {
    accessedRoutes = asyncRoutes || []
  } else {
    accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
}

当角色为admin的时候会自动返回所有的路由，否则自动根据角色匹配相应的路由

所以，这块，在进行对接后端的适合务必注意，这种方式不适合 用户对权限那种点对点 == ABAC 的方式

路由渲染

如上，当正确获取到路由配置后，我们需要进行路由加载

可以看到vue-element-admin/src/router/index.js 在这个文件中，可以看到

• scrollBehavior: () => ({ y: 0 })

如上，为什么要设置y 为 0 ，文章解析见 v2

关于路由的滚动行为

当路由进行切换时，由于vue默认是spa单页面应用，vue-router 是通过哈希来模拟完整的 url，当组件页面滚动的时候，依旧保持上一次的滚动状态

解决:

 router.beforeEach((to, from, next) => {
    // 让页面回到顶部
    document.documentElement.scrollTop = 0
    // 一定不要忘记调用 next()
    next()
})

关于这个问题可以细致研究，本文作者没有这个水平。具体见参考文章 v2

意思就是路由切换时，给他重置默认位置

• router.matcher = newRouter.matcher

这个，通过作者的解析文章得知，如果使用的官方默认的路由加载方式

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

当我们进行后端权限修改的时候，我们需要进行路由刷新重置，唯一的解决办法，只能进行重新登陆。但实际上，路由的实际信息保存在 router.matcher 中，同样的道理，我们可以通过动态的修改这个方法达到我们到效果

阅读vue api

当然，可以先去花一天时间进行阅读语法，我这里目前暂时没有必要

• vue.directive : 指令， 骚操作比较多，这个可以多花点时间理解一下
• vue.filter : 主要是全局过滤
• vue.component : 配置全局组件

• vue.use : 使用插件，常见的有

  Vue.use(ElementUi)
  

• props: 接受组件数据

  // 支持类型
  String、Number、Boolean、Array、Object、Date、Function、Symbol
  
  // 初始化例
  props: ['size', 'myMessage']
  props: {
      height: Number,
      age: {
        type: Number,
        default: 0,
        required: true,
        validator: function (value) {
          return value >= 0
      }
  }
  

• propsData：测试组件数据 （竟然发现这个东西，开发的时候很有用啊感觉）
• computed: 太简单了

熬不住了，今天处理其他事情太久了，明天补齐

参考文章

v1 :https://router.vuejs.org/zh/api/#router-resolve

v2 :https://www.jianshu.com/p/c805b74e1f14?utm_campaign vue 组件的 scrollBehavior

本文由 邓尘锋 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Mar 22, 2021 at 04:47 pm