vue 动态路由判断权限加载不同路由的方法。

看了好多动态路由的方法看到头晕,最后还是自己搞了个方法解决。

使用
  • addRouter
  • 本地存储
  • 路由钩子
思路

router/index.js

  • 在登录验证通过后,获取权限通过不同权限挂载不同权限的路由。
路由处理
这两个为动态追加的路由路径
// 平台路由
import platform from './0'
//运营路由
import management from './1'

正常的路由路劲
Vue.use(Router)
const router = new Router({
mode: 'hash',
routes:[
  {
    path: '/',
    name: '/',
    component: Login,
  },
//......写固定路由
过滤空路由
{
      path:"*",
      component:Login,
 }
]
})

只加载一次的 上锁
let off = true;
// 注册全局钩子用来拦截导航
router.beforeEach((to, from, next) => {
// 动态添加路由
if(off){
  let routers = []
//这里为读取本地的权限 测试里面只有0,1两个权限
  switch (window.sessionStorage.getItem('jurisdiction')) {
    case "0":
      routers = platform
      break;
    case "1":
      routers = management
      break;
    default:
      break;
  }
  router.addRoutes(routers)
//锁住
  off = false
}
})

被上面导入的路径代码如下

0.js || 1.js

//设置
const Setup = () => import('@/pages/setup/0/Setup.vue')
export default [
   //首页
   {
       path: '/index',
       name: 'Index',
       component: Index,
       meta: { requiresAuth: true },
   },
 ......
]

搞完这些后发现一个问题,不会加载,需要刷新页面才会出现。当时想了好多原因,不想了直接用了一个蠢办法,登陆成功后刷新一次

 // 登陆
        login (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {    
                    this.$store.dispatch('toLogin', {
                    loginUser: this.ruleForm.username,
                    loginPassword: this.ruleForm.password
                }).then(() => {
                    this.$router.go(0) //登陆成功后刷新一次再去获取信息
                    this.$store.dispatch('getUser')
                   ......
以下为超纲部分

这样又出了一个问题,刷新后加载出来的页面导航条第一个不会选中。默认进入第一个导航条不选中有点烦。查看数据发现已经挂载了需要触发一次点击事件。然后发现貌似强制触发事件也不行。最后灵机一动写了个自定义指令。
在页面挂载之前

<el-menu 
:default-active="activeIndex" 
background-color="transparent" 
@select="handleSelect"
> 

 <el-menu-item 
@click="routerGo(item[1])" 
:key="item[1].index" 
v-acti="item[1].index"  //自定义指令
v-for="(item,index) in showEnd" 
:index="item[1].index"
>
</el-menu-item>
</el-menu>

 directives:{
    'acti':{
       bind(el, binding,vnode){
        if(binding.value == 0 && window.sessionStorage.getItem('activeIndex') == null){
                    el.click()
                    return
        }                
        if(window.sessionStorage.getItem('activeIndex') == binding.value){
                    el.click()
        }
     }
   }
 },
data(){
  return {
    //最终挂载的路径
       showEnd:null,

       jurisdiction:'',
        //默认点击的值
        activeIndex:"0",
  }
},
    methods: {
        handleSelect(key, keyPath) {
            window.sessionStorage.setItem('activeIndex',key)            
        },
        // 切页面
        routerGo(item){
            this.$router.push(item.path)
        }
    },
如果页面初始存个点击项感觉这里可以不用。毕竟初始只用第一个
    created() {
        if(null == window.sessionStorage.getItem('activeIndex')){
            window.sessionStorage.setItem('activeIndex',this.activeIndex);
        }
    },
//加载不同的导航条
    mounted() {
        this.jurisdiction = window.sessionStorage.getItem('jurisdiction');
        let that = this
        switch (this.jurisdiction) {
            case "0":
                that.showEnd = that.showList1
                break;
            case "1":
                that.showEnd = that.showList2
                break;
        }  
    },
//监控路由跳转跳转让该页面的导航条处于激活状态
    watch: {
        $route(to,from){
            let path = "/"+(to.path.split("/")[1])
            this.showEnd.map(item => {
                if(item[1].path == path){
                    this.activeIndex = item[1].index
                }
            })
        }
    },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 完整项目地址:vue-element-admin系类文章一:手摸手,带你用vue撸后台 系列一(基础篇) 前言 拖...
    7cd975786ccd阅读 10,817评论 4 65
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 9,810评论 1 52
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,283评论 4 61
  • PS:转载请注明出处作者: TigerChain地址https://www.jianshu.com/p/9a7d7...
    TigerChain阅读 64,136评论 9 218
  • 冬日的阳光,满校园枯黄衰败的爬山虎,给人时光斑驳错位的感觉,我还在想那个有大片阳光从罅隙里漏下的大学,还在做一...
    我在拉粑粑阅读 207评论 0 1