vue vuex vue-rouert 권한 라우팅(자세한 튜토리얼)-JS 튜토리얼-php.cn

vue vuex vue-rouert 권한 라우팅(자세한 튜토리얼)

亚连

풀어 주다： 2018-06-14 15:29:43

원래의

2240명이 탐색했습니다.

이 글은 주로 vue vuex vue-rouert 백엔드 프로젝트 - 권한 라우팅을 소개합니다. 이 글을 통해 vue+vuex+vue-router의 관계를 명확하게 이해할 수 있습니다. 이 버전은 매우 간단하고 초보자에게 적합합니다. can 참고

프로젝트 주소: vue-simple-template

총 3가지 역할이 있습니다: adan barbara carrie 비밀번호는 모두 123456

adan이 가장 높은 권한을 가집니다. A. 빨간색, 노란색, 파란색을 볼 수 있습니다. 페이지(총 3페이지)

barbara에게는 빨간색과 노란색 페이지를 볼 수 있는 권한이 있습니다.

carrie에게는 C라는 권한이 있습니다.

프로젝트 구조

vue- cil 스캐폴딩으로 프로젝트 초기화 후 src 폴더만 수정했습니다

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

로그인 후 복사

핵심 포인트: 동적 라우팅의 핵심은 라우터에서 구성한 메타 필드와 vuex 상태(만약 이해가 안 되시면 먼저 공식 문서를 확인해 보세요)

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 actions section

// 初始化路由
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;}}
 ]
 }
];

로그인 후 복사

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

로그인 후 복사

comComponents/index.html 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(&#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);
 });
 },

로그인 후 복사

this 프로젝트를 진행하면서 vue+vuex+vue-router 간의 관계를 파악하는 것은 문제가 되지 않습니다. 이는 초보자에게 적합한 매우 간단한 버전이라고 할 수 있습니다. 위 내용에 언급된 핵심 사항은 실제로 전체 프로젝트입니다. 위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다. 관련 기사:

js에서 이미지 업로드 및 압축 기능을 구현하는 방법(자세한 튜토리얼)

JS를 사용하여 두 시간의 차이를 계산하는 방법

vue-cli에 jquery를 도입하는 방법 webpack(자세한 튜토리얼)

vue에서 파일을 사용하는 방법에 대해

순수한 js로 드롭다운 목록을 생성하는 방법

위 내용은 vue vuex vue-rouert 권한 라우팅(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!