Vue中許可權動態路由載入

這樣的操作無疑會使得前端做路由的載入時顯得更為複雜。我司的角色有包括管理員在內總共6種。所以我將自己在開發過程中遇到的問題整理起來。僅做參考，希望對大家有幫助！

? 1. 先從最高許可權下手，把專案所有需要做動態分配的路由都儲存到後台伺服器。(可能會有人說放在後端就遏制住前端的處理了，但是根據我們目前的情況，放在後台更方便處理)。

? 2. 利用後台存放的資料，做成選單樹。然後給每乙個想要獲取許可權的角色分配許可權，達到每乙個角色都擁有自定義許可權。

? 3. 給建立成的不同使用者分配角色，達到許可權的動態分配。

?我司的處理情況特殊，也就是給不同的角色來劃分許可權

? 4. 當使用者登入時，獲取當前使用者所在角色組，利用角色返回配置的路由資訊，然後將資訊載入到vue-router中，實現不同使用者||角色登入進系統後，顯示不同的路由選單。? 1. 使用者登入以後，在cookie存放後台返回的token||sessionid。

login
(userinfo)
.then
(res
=>
commit
('set_token'
, res.res)
;settoken
(res.res)
;resolve
(res)
})

234

5678

9 ? 2.在路由守衛中，我們做判斷。如果有我們要的cookie，那麼就讓繼續載入路由。處理相關事宜，這塊如有不懂。後期我會單獨抽出來做一次vue路由守衛的理解。

// 確定使用者是否已登入
const hastoken = store.getters.token;
if(hastoken)
)        nprogress.
done()
}else
else
catch
(error)`)
nprogress.
done()
}}}}
else
else`)
nprogress.
done()
}}

234

5678

9101112

1314

1516

1718

1920

2122

2324

2526

2728

2930

3132

3334

3536

373839

? 3. 當路由守衛判斷這是第一次進入系統，沒有角色。所以就要開始獲取角色。利用在vuex中寫的非同步方法請求到這一角色資訊，以及對應的路由資訊。

getinfo()
const
= data;
commit
('set_roles'
, roles)
commit
('set_name'
, name)
resolve
(data)})
})}

234

5678

9101112

1314

1516

1718

1920

2122

獲取當前角色的資訊，並丟擲

? 需要放入第二步空出來的區域

// 獲取路由列表
const
=await store.
dispatch
('user/getinfo');
//如果返回的資料列表為空，讓重新登入
if(list ==
undefined)`
)    nprogress.
done()
}else
)}

234

5678

9101112

1314

1516

1718

1920

此時丟擲的data被獲取到，我們拿到想要的list。通過已經定義好的遞迴方法，把我們傳進去的list生成vue的路由，並將生成的資料返回。我們使用router.addroutes()方法將路由載入。

? 4. 接第三步路由資訊的處理方法。

import
from
'@/router'
import layout from
'@/layout'
/** * 載入其他路由
* @param  route 
*/function
makeotherrouter
(route
)var unified = item.router.
split
('/').
pop();
var next =` )
,      name: unified,
meta:};
// 是否可見
if(item.visible ==
'0')
// 子路由
if(item.children)
;      next =
/index` )
,        name: unified,
meta:};
if(item.children.length ==1)
next.children =
;      next.children =
makerouter
(item)
}    res.
push
(next)})
return res;
}//載入第一層路由
export
function
makefirstrouter
(routes
)var unified = tmp.router.
split
('/').
pop();
if(tmp.icon)}}
// 第一級路由是否可見
if(tmp.visible ==
'0')
if(tmp.children)
if(tmp.children.length ==1)
res.
push
(first)})
return res
}const state =
const mutations =
}const actions =
, list))
commit
('set_routes'
, accessedroutes)
resolve
(accessedroutes)})
}}export
default

234

5678

9101112

1314

1516

1718

1920

2122

2324

2526

2728

2930

3132

3334

3536

3738

3940

4142

4344

4546

4748

4950

5152

5354

5556

5758

5960

6162

6364

6566

6768

6970

7172

7374

7576

7778

7980

8182

8384

8586

8788

8990

9192

9394

9596

9798

99100

101102

103104

105106

107108

109110

111112

113114

115116

117118

119120

121122

123124

此時我們的路由就已經處理完成。大致的流程走到這裡就結束了。因為資料為公司內部資料在這裡就沒有引用真實的資料，所以只是用語言組織的。

後面如果找到合適的資料會再次提出來，希望對正在處理這個問題的朋友提供一點點思路和幫助。希望支援~

Vue中許可權動態路由載入

vue 許可權管理動態路由（6）

vue router 實現動態路由載入，許可權管理

Vue路由許可權

Vue中許可權 動態路由載入

vue 許可權管理 動態路由（6）

vue router 實現動態路由載入，許可權管理

Vue路由許可權

相關推薦

Vue中許可權動態路由載入

vue 許可權管理動態路由（6）