Maison >interface Web >js tutoriel >Explication détaillée de l'exemple de routage des autorisations vue vuex vue-rouert
Cet article présente principalement le projet backend vue vuex vue-rouert - routage des autorisations. Grâce à cet article, vous pouvez clairement comprendre la relation entre vue+vuex+vue-router. Cette version est très simple et convient aux amis débutants. j'en ai besoin. Pour référence, j'espère que cela pourra aider tout le monde.
Adresse du projet : vue-simple-template
Il y a trois rôles au total : adan barbara carrie Les mots de passe sont tous : 123456
adan a la plus haute autorité A. Il peut voir les pages rouges, jaunes et bleues (trois pages au total)
barbara a la permission B. Il peut voir les pages rouges et jaunes
carrie a la permission C. Il peut voir le rouge et pages bleues
Pile technologique
webpack ---- 打包神器 vue ---- JavaScript 框架 vuex ---- 实现不同组件间的状态共享 vue-router ---- 页面路由 babel-polyfill ---- 将ES6代码转为ES5代码 normalize.css ---- 重置掉该重置的样式 element-ui ---- UI组件库
Initialisation du projet
# cd 到项目文件夹 cd weven-simple-template # 安装依赖 (本项目还安装了其他依赖详情 请见 package.json 文件) npm install # 运行项目 npm run dev
Structure du projet
Initialisation de l'échafaudage vue-cil Après le projet, j'ai uniquement modifié le dossier 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
Points clés :
Routage dynamique La clé est que le champ méta configuré par le routeur et le statut de vuex coexistent (si vous ne comprenez pas, vous pouvez d'abord consulter la documentation officielle)
routeur/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); }); },
section actions gin.js
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' ])
Prenez ce projet pour effacer vue+vuex La relation entre +vue-router ne pose aucun problème. Cela peut être considéré comme une version super simple, adaptée aux débutants. Les points clés mentionnés ci-dessus concernent en fait l'ensemble du projet
Adresse du projet : vue-simple-template
Recommandations associées :
Explication détaillée des étapes de mise en œuvre du SPA pour l'imbrication du routage de vue
Exemple d'explication détaillée de l'itinéraire de montage de vue vers la navigation principale
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!