Фоновый проект Vue vuex vue-router - маршрутизация разрешений (супер подробная простая версия)

Vue.js

адрес проекта:vue-simple-templateВсего три роли: адан барбара керри пароль все: 123456

адан имеет высшие полномочия A и может видеть красную, желтую и синюю страницы (всего три страницы)

у барбары есть разрешение B, он может видеть красные и желтые страницы

у Кэрри есть разрешение C он может видеть красные и синие страницы

стек технологий

webpack         ---- 打包神器
vue             ---- JavaScript 框架
vuex            ---- 实现不同组件间的状态共享
vue-router      ---- 页面路由
babel-polyfill  ---- 将ES6代码转为ES5代码
normalize.css   ---- 重置掉该重置的样式
element-ui      ---- UI组件库

Инициализация проекта

# cd 到项目文件夹
cd weven-simple-template
# 安装依赖 （本项目还安装了其他依赖详情 请见 package.json 文件）
npm install
# 运行项目
npm run dev

Структура проекта

После того, как скаффолдинг vue-cil инициализировал проект, я изменил только папку src

src
├── App.vue         ---- 页面入口
├── api             ---- api请求
│   └── login.js    ---- 模拟json对象数据
├── assets          ---- 主题 字体等静态资源
│   └── logo.png
├── components      ---- 组件
│   ├── index.vue
│   └── login.vue 
├── main.js         ---- 初始化组件 加载路由
├── router          ---- 路由
│   └── index.js
└── store           ---- vuex状态管理
    ├── getters.js
    ├── index.js
    └── modules
        └── login.js

Особенности:

Ключ к динамической маршрутизации лежит в конфигурации маршрутизатора.метаполеи vuex выставленполе геттера

// ----  router/index.js  ----
// 初始化路由
export default new Router({  
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]  
});
// 动态路由 meta 定义了role
export const powerRouter =[    
    { path: '/',redirect:'/red', name: 'index',component: Index,hidden:false,
      children: [
        { path: '/red', name: 'red', component: red,},
        { path: '/yellow', name: 'yellow', component: yellow, meta: {role: 'B'}},
        { path: '/blue', name: 'blue', component: blue, meta: {role: 'C'}}
      ]
    }
];

// ----  main.js  ----
router.beforeEach((to, from, next) => {
    if(store.getters.role){ //判断role 是否存在
    	
    	if(store.getters.newrouter.length !== 0){  
       		next() //resolve 钩子
	    }else{
	    	let newrouter
       		if (store.getters.role == 'A') {  //判断权限
                newrouter = powerRouter
            } else {
                let newchildren = powerRouter[0].children.filter(route => {
                    if(route.meta){
                    	if(route.meta.role == store.getters.role){
                    		return true
                        }
                        return false
                    }else{
                        return true
                    }
                });
                newrouter = powerRouter
                newrouter[0].children = newchildren
            }
            router.addRoutes(newrouter) //添加动态路由
            store.dispatch('Roles',newrouter).then(res => { 
                next({ ...to })
            }).catch(() => {       

            })
	    }	  
    }else{
       	if (['/login'].indexOf(to.path) !== -1) { 
           next()
        } else {
           next('/login')
        }
	}
})

// ----  components/index.vue  ----
// mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

...mapGetters([
        'newrouter'
    ])

Не проблема взять этот проект для выяснения отношений между vue+vuex+vue-router, можно сказать, что это супер простая версия, подходящая для новичков. Вы можете ознакомиться с соответствующими официальными документами. В центре внимания вышеприведенного содержания на самом деле находится весь проект.

адрес проекта:vue-simple-templateЕсли вы чувствуете себя хорошо, пожалуйста, дайте звезду~ Спасибо

Любые вопросы приветствуются, чтобы спросить ~

Категории