Explication détaillée de l'exemple de routage des autorisations vue vuex vue-rouert-js tutoriel-php.cn

Explication détaillée de l'exemple de routage des autorisations vue vuex vue-rouert

小云云

Libérer： 2017-12-29 16:51:28

original

2200 Les gens l'ont consulté

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组件库

Copier après la connexion

Initialisation du projet

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

Copier après la connexion

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

Copier après la connexion

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: &#39;/login&#39;,
 name: &#39;Login&#39;,
 component: Login
 }
 ] 
});
// 动态路由 meta 定义了role
export const powerRouter =[ 
 { path: &#39;/&#39;,redirect:&#39;/red&#39;, name: &#39;index&#39;,component: Index,hidden:false,
 children: [
 { path: &#39;/red&#39;, name: &#39;red&#39;, component: red,},
 { path: &#39;/yellow&#39;, name: &#39;yellow&#39;, component: yellow, meta: {role: &#39;B&#39;}},
 { path: &#39;/blue&#39;, name: &#39;blue&#39;, component: blue, meta: {role: &#39;C&#39;}}
 ]
 }
];

Copier après la connexion

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(&#39;SET_USERNAME&#39;,item.username); //将username和role进行存储
   sessionStorage.setItem(&#39;USERNAME&#39;, item.username); //存入 session 
   commit(&#39;SET_ROLE&#39;,item.role);
   sessionStorage.setItem(&#39;ROLE&#39;, 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(&#39;SET_NEWROUER&#39;,newrouter); //存储最新路由
  resolve(newrouter);
 }).catch(error => {
  reject(error);
 });
 },

Copier après la connexion

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(&#39;SET_USERNAME&#39;,item.username); //将username和role进行存储
   sessionStorage.setItem(&#39;USERNAME&#39;, item.username); //存入 session 
   commit(&#39;SET_ROLE&#39;,item.role);
   sessionStorage.setItem(&#39;ROLE&#39;, 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(&#39;SET_NEWROUER&#39;,newrouter); //存储最新路由
  resolve(newrouter);
 }).catch(error => {
  reject(error);
 });
 },

Copier après la connexion

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 == &#39;A&#39;) { //判断权限
  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(&#39;Roles&#39;,newrouter).then(res => { 
  next({ ...to })
  }).catch(() => { 

  })
 } 
 }else{
  if ([&#39;/login&#39;].indexOf(to.path) !== -1) { 
  next()
 } else {
  next(&#39;/login&#39;)
 }
 }
})

Copier après la connexion

components/index.vue

// mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
...mapGetters([
 &#39;newrouter&#39;
 ])

Copier après la connexion

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

Explication détaillée de la vérification de l'itinéraire et de l'interception correspondante dans vue Comment utiliser

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!