針對Vue的後臺權限功能實現思路(持續更新)

權限是一塊設計挺繁瑣的功能，尤爲是設計到前端SPA應用，先後端的耦合性太強，先屢屢思路，再實現，若是您有好的建議，也可評論留言。

基本的表結構以下

用戶表。user

字段	說明
id	用戶ID
username	用戶名

示例

id	username
1	賽冷思

---

前端路由表。routes

字段	說明
id	路由自增ID
pid	父級路由ID，默認根路由爲0
path	方便操做無線分類的關鍵字段，後面再說
web_pata	前端路由路徑，注意：爲方便各類SPA，先後不帶斜槓，交給前端本身處理便可
name	路由名稱
desc	路由描述
sort	排序，例如同一級路由，可按此字段排序，這個排序結果將會在前端菜單中提現
extra	拓展信息，格式爲JSON字符串，例如vue-router中的meta信息

有幾項須要注意：

1. 添加功能儘可能讓前端開發者填寫，你懂得
2. 修改時，前端必定要知道，你懂得
3. 刪除時，前端必定要知道，你懂得

切記，這些東西都是跟前端相關聯。。。

示例

id	pid	path	web_path	name	desc	sort	extra
1	0	0,	manager	內容管理	管理內容的路由	1	{}
2	1	0,1,	article	文章管理	文章管理	1	{}
3	2	0,1,2,	list	文章列表	查看文章列表頁面	1	{}
4	2	0,1,2,	view	文章詳情	查看文章詳情頁面	1	{}
5	2	0,1,2,	edit	添加/修改文章	添加和修改文章公用頁面	1	{"test":"article-edit"}
6	1	0,1,	mind	隨筆管理	隨筆管理	1	{}
7	6	0,1,6,	list	隨筆列表	查看隨筆列表頁面	1	{}
8	6	0,1,6,	view	隨筆詳情	查看隨筆詳情頁面	1	{}
9	6	0,1,6,	edit	添加/修改隨筆	添加和修改隨筆公用頁面	1	{"test":"mind-edit"}

注意：給用戶選擇路由時，若是選擇的是最底層的路由，那麼從它自身到最頂層父級，都應該被選擇，例如選擇文章列表，那麼文章管理和內容管理都應該被選中。一樣，若是選擇的不是最底層的，那麼全部的子級應該被選中，再也不細說。

解釋一下關鍵字段

• pid 父級ID，根級ID爲0，沒啥說
• path 默認爲"0,",意思就把當前數據，從最頂層的父級pid到自身的pid，用英文","連接起來,最後要加個逗號

例如，文章管理本身的pid爲1，它得父級內容管理的pid是0，因此文章管理的path就是"0,1,",一次類推就行

• extra 前端路由的拓展信息

---

用戶路由關聯表。user_routes

字段	說明
id	自身自增ID
user_id	用戶ID
route_id	路由ID
extra	拓展信息，格式爲JSON字符串，例如vue-router中的meta信息,此拓展在將會和routes表extra合併，能夠經過這個字段細粒度控制路由中的小操做

示例

id	user_id	route_id	extra
1	1	1	{}
2	1	2	{}
3	1	6	{}
4	1	3	{}
5	1	4	{}
6	1	9	{"add":true,"update":false}

經過示例能夠看出，該用戶擁有的路由其實就三個頁面，分別是：文章列表,文章查看和添加/修改隨筆，注意：添加/修改隨筆extra裏面設置了，add爲true,update爲false，意思是，只能添加，不能修改，前端能夠在用戶進入這個頁面的時候，經過這個信息來決定到底能幹啥，從而也就實現了細粒度控制每一個頁面的具體操做。

最終給前端返回的數據格式以下：

{
	id:1,
	username:'賽冷思',
	routes:[
		{
			id:1,
			web_path:'manager',
			name:'內容管理',
			extra:{},
			...其餘字段
			children:[
				{
					id:2,
					web_path:'article',
					name:'文章管理',
					extra:{},
					children:[
						{
							id:3,
							web_path:'list',
							name:'文章列表',
							extra:{},
						},
						{
							id:4,
							web_path:'view',
							name:'文章詳情',
							extra:{},
						}
					]
				},
				{
					{
						id:6,
						web_path:'mind',
						name:'隨筆管理',
						extra:{},
						children:[
							{
								id:9,
								web_path:'view',
								name:'添加/修改隨筆',
								extra:{
									test:'mind-edit',
									add:true,
									update:false
								}
							}
						]
					}
				}
			]
		}
	]
}

大體思路就是這樣，回頭在實現的過程當中發現不完善的，將會持續更新。

最新更新在個人博客：https://sailengsi.com/article/15