vue vuex vue-rouert Berechtigungsrouting (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich das Hintergrundprojekt vue vuex vue-rouert vorgestellt – Berechtigungsrouting. Diese Version ist sehr einfach und für Anfänger geeignet siehe

Projektadresse: vue-simple-template

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

adan hat die höchste Autorität A . Er kann die roten, gelben und blauen 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 siehe die roten und blauen Seiten Initialisierung

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

Projektstruktur

Nachdem vue-cil scaffolding das Projekt initialisiert hatte, habe ich nur den src-Ordner

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

Wichtige Punkte:

Der Schlüssel zum dynamischen Routing ist die Koexistenz des vom Router konfigurierten Metafelds und des Status von vuex (falls Wenn Sie es nicht verstehen, können Sie zuerst die offizielle Dokumentation überprüfen 🎜>

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

main.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'}}
 ]
 }
];

components/index.vue

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

Es ist kein Problem, dieses Projekt zu verwenden, um die Beziehung zwischen vue+vuex+vue-router zu klären Man kann sagen, dass es sich um eine supereinfache Version handelt, die für Anfänger geeignet ist. Die oben genannten Schlüsselpunkte beziehen sich tatsächlich auf das gesamte Projekt

Das Obige habe ich für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel: So laden Sie Bilder in js hoch und komprimieren sie (ausführliche Anleitung)

So berechnen Sie zwei Zeitunterschiede mit JS

So führen Sie JQuery in das Vue-CLI-Webpack ein (ausführliche Anleitung)

So verwenden Sie Dateien in Vue

So generieren Sie eine Dropdown-Liste mit reinem JS

Das obige ist der detaillierte Inhalt vonvue vuex vue-rouert Berechtigungsrouting (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!