建站资讯

南宁微信小程序优化_vue vuex vue

作者:admin 发布时间:2021-01-11
vue vuex vue-rouert后台项目——权限路由(适合初学)     &JS   这篇文章主要介绍了vue vuex vue-rouert后台项目——权限路由,通过本文可以很清除的捋清楚vue+vuex+vue-router的关系,本版本非常简单,适合初学者,需要的朋友可以参考下

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

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

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

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

技术栈

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文件夹

├── 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 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'}}
];

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); //存入 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 vuex vue-rouert后台项目——权限路由(适合初学),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!



收缩