資訊專欄INFORMATION COLUMN
摘要：可以配合相關(guān)的官方文檔學(xué)習(xí)。上面的內(nèi)容說(shuō)的重點(diǎn)，其實(shí)也算是項(xiàng)目的全部啦項(xiàng)目地址感覺還不錯(cuò)的話就請(qǐng)給個(gè)吧謝謝有什么問(wèn)題歡迎提問(wèn)
項(xiàng)目地址：vue-simple-template
共三個(gè)角色：adan barbara carrie 密碼全是：123456
adan 擁有 最高權(quán)限A 他可以看到 red , yellow 和 blue 頁(yè)面（共三個(gè)頁(yè)面）
barbara 擁有 權(quán)限B 他可以看到 red 和 yellow 頁(yè)面
carrie 擁有 權(quán)限C 他可以看到 red 和 blue 頁(yè)面
webpack ---- 打包神器 vue ---- JavaScript 框架 vuex ---- 實(shí)現(xiàn)不同組件間的狀態(tài)共享 vue-router ---- 頁(yè)面路由 babel-polyfill ---- 將ES6代碼轉(zhuǎn)為ES5代碼 normalize.css ---- 重置掉該重置的樣式 element-ui ---- UI組件庫(kù)項(xiàng)目初始化
# cd 到項(xiàng)目文件夾 cd weven-simple-template # 安裝依賴 （本項(xiàng)目還安裝了其他依賴詳情 請(qǐng)見 package.json 文件） npm install # 運(yùn)行項(xiàng)目 npm run dev項(xiàng)目結(jié)構(gòu)
vue-cil 腳手架初始化項(xiàng)目后，我只修改過(guò)src文件夾
src
├── App.vue ---- 頁(yè)面入口
├── api ---- api請(qǐng)求
│?? └── login.js ---- 模擬json對(duì)象數(shù)據(jù)
├── assets ---- 主題 字體等靜態(tài)資源
│?? └── logo.png
├── components ---- 組件
│?? ├── index.vue
│?? └── login.vue
├── main.js ---- 初始化組件 加載路由
├── router ---- 路由
│?? └── index.js
└── store ---- vuex狀態(tài)管理
├── getters.js
├── index.js
└── modules
└── login.js
重點(diǎn)：
動(dòng)態(tài)路由的關(guān)鍵在于router配置的meta字段和vuex的狀態(tài)共存
// ---- router/index.js ----
// 初始化路由
export default new Router({
routes: [
{
path: "/login",
name: "Login",
component: Login
}
]
});
// 動(dòng)態(tài)路由 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/login.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進(jìn)行存儲(chǔ)
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); //存儲(chǔ)最新路由
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") { //判斷權(quán)限
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) //添加動(dòng)態(tài)路由
store.dispatch("Roles",newrouter).then(res => {
next({ ...to })
}).catch(() => {
})
}
}else{
if (["/login"].indexOf(to.path) !== -1) {
next()
} else {
next("/login")
}
}
})
// ---- components/index.vue ----
// mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性
...mapGetters([
"newrouter"
])
此項(xiàng)目拿去 捋清楚 vue+vuex+vue-router 的關(guān)系是沒(méi)問(wèn)題的，這可以說(shuō)的超級(jí)簡(jiǎn)單的版本，適合初學(xué)?？梢耘浜舷嚓P(guān)的官方文檔學(xué)習(xí)。上面的內(nèi)容說(shuō)的重點(diǎn)，其實(shí)也算是項(xiàng)目的全部啦
項(xiàng)目地址：vue-simple-template
感覺還不錯(cuò)的話就請(qǐng)給個(gè) star 吧～ 謝謝
有什么問(wèn)題歡迎提問(wèn)～
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90517.html
摘要：我們將登錄按鈕上綁上事件，點(diǎn)擊登錄之后向服務(wù)端提交賬號(hào)和密碼進(jìn)行驗(yàn)證。所以前端和后端權(quán)限的劃分是不太一致。側(cè)邊欄最后一個(gè)涉及到權(quán)限的地方就是側(cè)邊欄，不過(guò)在前 完整項(xiàng)目地址：vue-element-admin 系列文章： 手摸手，帶你用vue擼后臺(tái) 系列一（基礎(chǔ)篇） 手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇) 手摸手，帶你用vue擼后臺(tái) 系列三 (實(shí)戰(zhàn)篇) 手摸手，帶你用vu...
摘要：組件已經(jīng)有了，我們的框架還有哪些特性呢自適應(yīng)自適應(yīng)現(xiàn)在很多框架都沒(méi)有自適應(yīng)功能，而很多使用場(chǎng)景也在手機(jī)上會(huì)有，這也是后臺(tái)管理框架誕生的原因之一。 系列教程《一步步帶你做vue后臺(tái)管理框架》第一課 github地址：vue-framework-wz線上體驗(yàn)地址：立即體驗(yàn)??《一步步帶你做vue后臺(tái)管理框架》第一課：介紹框架《一步步帶你做vue后臺(tái)管理框架》第二課：上手使用《一步步帶你做v...
摘要：二接口訪問(wèn)的權(quán)限控制接口權(quán)限就是對(duì)用戶的校驗(yàn)。代碼如下按扭權(quán)限指令至此為止，權(quán)限控制流程就已經(jīng)完全結(jié)束了，在最后我們?cè)倏匆幌峦暾臋?quán)限控制流程圖吧五路由控制完整流程圖六參考文獻(xiàn)手?jǐn)]后臺(tái)管理網(wǎng)站之權(quán)限控制手摸手，帶你用擼后臺(tái)之權(quán)限控制 原文首發(fā)于我的博客，歡迎點(diǎn)擊查看獲得更好的閱讀體驗(yàn)~ 一、前言 在廣告機(jī)項(xiàng)目中，角色的權(quán)限管理是卡了挺久的一個(gè)難點(diǎn)。首先我們確定的權(quán)限控制分為兩大部分，其...
摘要：二接口訪問(wèn)的權(quán)限控制接口權(quán)限就是對(duì)用戶的校驗(yàn)。代碼如下按扭權(quán)限指令至此為止，權(quán)限控制流程就已經(jīng)完全結(jié)束了，在最后我們?cè)倏匆幌峦暾臋?quán)限控制流程圖吧五路由控制完整流程圖六參考文獻(xiàn)手?jǐn)]后臺(tái)管理網(wǎng)站之權(quán)限控制手摸手，帶你用擼后臺(tái)之權(quán)限控制 原文首發(fā)于我的博客，歡迎點(diǎn)擊查看獲得更好的閱讀體驗(yàn)~ 一、前言 在廣告機(jī)項(xiàng)目中，角色的權(quán)限管理是卡了挺久的一個(gè)難點(diǎn)。首先我們確定的權(quán)限控制分為兩大部分，其...
摘要：二接口訪問(wèn)的權(quán)限控制接口權(quán)限就是對(duì)用戶的校驗(yàn)。代碼如下按扭權(quán)限指令至此為止，權(quán)限控制流程就已經(jīng)完全結(jié)束了，在最后我們?cè)倏匆幌峦暾臋?quán)限控制流程圖吧五路由控制完整流程圖六參考文獻(xiàn)手?jǐn)]后臺(tái)管理網(wǎng)站之權(quán)限控制手摸手，帶你用擼后臺(tái)之權(quán)限控制 原文首發(fā)于我的博客，歡迎點(diǎn)擊查看獲得更好的閱讀體驗(yàn)~ 一、前言 在廣告機(jī)項(xiàng)目中，角色的權(quán)限管理是卡了挺久的一個(gè)難點(diǎn)。首先我們確定的權(quán)限控制分為兩大部分，其...
閱讀 3445·2021-11-19 09:40
閱讀 1351·2021-10-11 11:07
閱讀 4873·2021-09-22 15:07
閱讀 2904·2021-09-02 15:15
閱讀 1976·2019-08-30 15:55
閱讀 548·2019-08-30 15:43
閱讀 897·2019-08-30 11:13
閱讀 1463·2019-08-29 15:36
