重学vue
in LinuxPHP前端 with 0 comment

重学vue

in LinuxPHP前端 with 0 comment

前情提要

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

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

1、启动登陆流程

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

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

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

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

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

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

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

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

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

路由渲染

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

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

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

关于路由的滚动行为

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

解决:

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

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

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

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

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

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

阅读vue api

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

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

参考文章

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

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

赣ICP备17004055号-2