vue vuex vue

vue vuex vue

项目地址： vue-simple-template

共三个角色：adan barbara carrie 密码全是：123456

adan 拥有 最高权限A 他可以看到 red , yellow 和 blue 页面（共三个页面）

barbara 拥有 权限B 他可以看到 red 和 yellow 页面

carrie 拥有 权限C 他可以看到 red 和 blue 页面

技术栈

webpack ---- 打包神器

vue ---- javascript 框架

vuex ---- 实现不同组件间的状态共享

vue-router ---- 页面路由

babPKahkel-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

重点：

动态路由的关键在于router配置的 meta字段 和vuex的 状态共存 （不懂可以先查看官方文档）

router/index.js

// 初始化路由

export default new Rohttp://uter({

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'}}

]

}

];

store/modules/lo

Logins({ commit }, info){

return new Promise((resolve, reject) => {

let data={};

loginByUserInfo.map(function (item) { //获取所以用户信息

if(info.username === item.username || info.pew === item.pew){

commit('SET_USERNAME',item.username); //将username和role进行存储

sessionStorage.setItem('USERNAME', item.username)http://; //存入 session

commit('SET_ROLE',item.role);

sessionStorage.setItem('ROLE', item.role);

return data={username:item.username,introduce:item.introduce};

}else{

return data;

}

});

resolve(data);

}).catch(error => {

reject(error);

});

},

Roles({ commit }, newrouter){

return new Promise((resolve, reject) => {

commit('SET_NEWROUER',newrouter); //存储最新路由

resolve(newrouter);

}).catch(error => {

reject(error);

});

},

gin.js  actions部分

Logins({ commit }, info){

return new Promise((resolve, reject) => {

let data={};

loginByUserInfo.map(function (item) { //获取所以用户信息

if(info.username === item.username || info.pew === item.pew){

commit('SET_USERNAME',item.username); //将username和role进行存储

sessionStorage.setItem('USERNAME', item.username); //存入 session

commit('SET_ROLE',item.role);

sessionStorage.setItem('ROLE', item.role);

return data={username:item.username,introduce:item.introduce};

}else{

return data;

}

});

resolve(data);

}).catch(error => {

reject(error);

});

},

Roles({ commit }, newrouter){

return new Promise((resolve, reject) => {

commit('SET_NEWROUER',newrouter); //存储最新路由

resolve(newrouter);

}).catch(error => {

reject(error);

});

},

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

总结

以上所述是给大家介绍的vue vuex vue-rouert后台项目——权限路由（适合初学），希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。