vue vuex vue-rouert 権限ルーティング (詳細なチュートリアル)

この記事では主に vue vuex vue-rouert バックエンド プロジェクト - パーミッション ルーティングについて説明します。このバージョンは非常にシンプルで、必要な初心者に適しています。ご参考までに

プロジェクトアドレス: vue-simple-template

役割は全部で 3 つあります: adan barbara carrie パスワードはすべて: 123456

adan は最高の権限を持っています A. 彼は赤、黄、青を見ることができます。ページ (合計 3 ページ)

バーバラは許可 B を持っています。彼は赤と黄色のページを見ることができます。

キャリーは許可 C を持っています。彼は赤と青のページを見ることができます

vue- cil スキャフォールディングでプロジェクトを初期化した後、src フォルダーのみを変更しました

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

キーポイント:

動的ルーティングの鍵は、ルーターによって設定されたメタフィールドと vuex の状態 (If理解できない場合は、まず公式ドキュメントを確認してください)router/index.js

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

store/modules/lo

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

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

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

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

this プロジェクトを取得して、vue+vuex+vue-router の関係を理解するのは問題ありません。これは、初心者に適した超簡単なバージョンと言えます。上記の内容で述べた重要な点は、実際に私がまとめたものであり、今後皆さんの参考になれば幸いです。

関連記事: 画像のアップロードと圧縮機能をjsで実装する方法(詳細チュートリアル)

JSを使用して2つの時刻の差を計算する方法

vue-cliにjqueryを導入する方法webpack (詳細チュートリアル)

vueでのファイルの使い方について

pure jsでドロップダウンリストを生成する方法

以上がvue vuex vue-rouert 権限ルーティング (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。