이 글은 주로 vue vuex vue-rouert 백엔드 프로젝트 - 권한 라우팅을 소개합니다. 이 글을 통해 vue+vuex+vue-router의 관계를 명확하게 이해할 수 있습니다. 이 버전은 매우 간단하고 초보자에게 적합합니다. 그것을 참조할 수 있습니다. 모두에게 도움이 되기를 바랍니다.
프로젝트 주소: vue-simple-template
총 3가지 역할이 있습니다: adan barbara carrie. 비밀번호는 모두 123456
adan이 가장 높은 권한을 가집니다. A. 그는 빨간색, 노란색 및 파란색 페이지(3개)를 볼 수 있습니다. 총 페이지 수)
barbara에는 B 권한이 있으며 빨간색과 노란색 페이지를 볼 수 있습니다
carrie에는 C 권한이 있고 빨간색과 파란색 페이지를 볼 수 있습니다
Technology stack
webpack ---- 打包神器 vue ---- JavaScript 框架 vuex ---- 实现不同组件间的状态共享 vue-router ---- 页面路由 babel-polyfill ---- 将ES6代码转为ES5代码 normalize.css ---- 重置掉该重置的样式 element-ui ---- UI组件库
프로젝트 초기화
# cd 到项目文件夹 cd weven-simple-template # 安装依赖 (本项目还安装了其他依赖详情 请见 package.json 文件) npm install # 运行项目 npm run dev
프로젝트 구조
vue-cil 프로젝트 초기화 후 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
핵심 포인트:
동적 라우팅의 핵심은 라우터 구성입니다. 메타 필드와 vuex의 상태가 공존합니다(이해하지 못하는 경우 먼저 공식 문서를 확인하세요)
router/index.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'}} ] } ];
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('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); }); },
gin.js actions section
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); }); },
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 == 'A') { //判断权限 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('Roles',newrouter).then(res => { next({ ...to }) }).catch(() => { }) } }else{ if (['/login'].indexOf(to.path) !== -1) { next() } else { next('/login') } } })
comComponents/index.vue
// mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性 ...mapGetters([ 'newrouter' ])
이 프로젝트를 사용하여 관계를 명확히 하는 것은 문제가 되지 않습니다. 사이에 vue+vuex+vue-router 초심자에게 적합한 버전이라고 할 수 있습니다. 위 내용에 언급된 핵심 사항은 실제로 전체 프로젝트입니다
프로젝트 주소: vue-simple-template
관련 권장 사항:
Vue 라우팅 중첩의 SPA 구현 단계에 대한 자세한 설명
자세한 설명 예 vue 후킹 경로를 헤드 내비게이션에 로드
vue에서 경로 확인 및 해당 차단 사용법에 대한 자세한 설명
위 내용은 vue vuex vue-rouert 권한 라우팅 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!