Detaillierte Erläuterung des Beispiels für das Berechtigungsrouting von vue vuex vue-rouert-js-Tutorial-php.cn

Detaillierte Erläuterung des Beispiels für das Berechtigungsrouting von vue vuex vue-rouert

小云云

Freigeben： 2017-12-29 16:51:28

Original

2229 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Vue-Vue-Router-Backend-Projekt vorgestellt – Berechtigungsrouting. Durch diesen Artikel können Sie die Beziehung zwischen Vue + Vue-Router klar verstehen. Diese Version ist sehr einfach und für Anfänger geeignet Ich brauche es. Als Referenz hoffe ich, dass es jedem helfen kann.

Projektadresse: vue-simple-template

Es gibt insgesamt drei Rollen: adan barbara carrie Die Passwörter lauten alle: 123456

adan hat die höchste Autorität A. Er kann rote, gelbe und blaue Seiten sehen (insgesamt drei Seiten)

Barbara hat die Erlaubnis B. Er kann die roten und gelben Seiten sehen

Carrie hat die Erlaubnis C. Er kann die roten sehen und blaue Seiten

Technology Stack

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

Nach dem Login kopieren

Projektinitialisierung

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

Nach dem Login kopieren

Projektstruktur

vue-cil-Gerüstinitialisierung Nach dem Projekt habe ich nur den src-Ordner geändert

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

Nach dem Login kopieren

Wichtige Punkte:

Dynamisches Routing Der Schlüssel liegt darin, dass das vom Router konfigurierte Metafeld und der Status von Vuex nebeneinander existieren (wenn Sie es nicht verstehen, können Sie zuerst die offizielle Dokumentation überprüfen)

Router/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;}}
 ]
 }
];

Nach dem Login kopieren

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);
 });
 },

Nach dem Login kopieren

gin.js-Aktionsabschnitt

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);
 });
 },

Nach dem Login kopieren

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;)
 }
 }
})

Nach dem Login kopieren

components/index.vue

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

Nach dem Login kopieren

Nehmen Sie dieses Projekt, um vue+vuex zu löschen. Die Beziehung zwischen +vue-router ist kein Problem. Man kann sagen, dass es sich um eine supereinfache Version handelt, die für Anfänger geeignet ist. Die oben genannten Schlüsselpunkte sind eigentlich das gesamte Projekt

Projektadresse: vue-simple-template

Verwandte Empfehlungen:

Detaillierte Erläuterung der Schritte zur SPA-Implementierung für die Vue-Routing-Verschachtelung

Beispiel für eine ausführliche Erklärung der Vue-Montageroute zur Kopfnavigation

Detaillierte Erläuterung der Routenüberprüfung und des entsprechenden Abfangens in Vue. Anleitung Verwenden Sie

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Beispiels für das Berechtigungsrouting von vue vuex vue-rouert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!