這篇文章主要介紹了vue vuex vue-rouert後台專案－權限路由，透過本文可以很清除的捋清楚vue vuex vue-router的關係，本版本非常簡單，適合初學者,需要的朋友可以參考下
專案地址： vue-simple-template
共三個角色：adan barbara carrie 密碼全是：123456
adan 擁有最高權限A 他可以看到red , yellow 和blue 頁面（共三個頁面）
barbara 擁有權限B 他可以看到red 和yellow 頁面
carrie 擁有權限C 他可以看到red 和blue 頁面
技術堆疊
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
登入後複製
#重點：
動態路由的關鍵在於router配置的meta欄位和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部分
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')
}
}
})登入後複製
#components/index.vue
// mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
...mapGetters([
'newrouter'
])
登入後複製
此項目拿去捋清楚vue vuex vue-router 的關係是沒問題的，這可以說的超級簡單的版本，適合初學。上面的內容說的重點，其實也算是專案的全部啦
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
在js中如何實作上傳並壓縮圖片功能（詳細教學）
使用JS如何計算兩個時間相差數
在vue-cli webpack中如何引入jquery（詳細教學）
在vue中有關檔案使用方式
純js如何產生下拉清單
以上是vue vuex vue-rouert 權限路由（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
