api權限的分配。
拿到最新的項目首先是F6編譯一下。
創建一個新控制器
默認生成包含增刪改的api
運行后端api項目,可以搜索到剛才添加的demoApi
運行測試一下
打開admin前端項目,運行起來。
后端使用的注意事項。這里的Name等於Get
再添加一個控制器
創建后,直接運行就會報錯
屬性路由有相同的Get模板。
一個是在在DefaultController里面一個是在DemoApiController里面。
Name等於Get的Action。第一次添加一個控制器是沒有問題的,再添加一個控制器就會報錯。
可以把Name等於get去掉就可以了
前端
配置剛才控制器添加的接口。
當前測試賬號不能添加、刪除和編輯操作。
使用超級管理員登陸
需要修改管理員的密碼。把test密碼復制給admin
在本系統里面判斷權限是在route后面加了Action。通過Action的名字來判斷的。這種寫方法,可以。但是不可取。這么加的話,就不是原則意義上的Restful風格了。
如果是自己開發的話,盡量是url+謂詞的方式。
前面url相同 后面的請求方式不同,就是post、get、put、delete這些方式。大概就是這個意思。
加上Action后,接口發生了變化。接口地址就帶上了Action的名字。
添加接口。
接口添加好了。
配置菜單
views下新建Demo文件夾,然后在文件夾下新建Index.vue
前端隨便寫點東西
這樣頁面就算市創建好了。
頁面創建好后,錄入到系統內。
icon在這里找的
然后這里的圖標就添加上了。
添加二級菜單
菜單並不是每次都是從后台讀取的。存儲在LocalStorage里面的有一個router路由。
所以添加了新的菜單需要退出重新登陸系統。
還需要給這個角色配置上菜單。當前登陸的是超級管理員。角色是SuperAdmin
設置成功后,再重新登陸系統
路由地址需要改成大小寫對應的
路由的配置,主要是這塊的代碼。
讀取api
導出一個demo模塊。所有的api接口全部在api/api.js這里面。
在mounted鈎子函數內執行訪問后端接口的方法
重新登陸前端。可以看到訪問到了數據。
輸入res.data
頁面權限問題
添加上權限
基於角色的是這么寫的。但是這么就寫死了。
我們是基於策略的,都配置在數據庫內了
前面的Policy可以省略
權限統一走的策略授權
加上權限后,這里訪問后端接口數據。提示是路由的攔截器
攔截器。request是請求的攔截器
增加權限
菜單默認帶的是get方法。意思是我們把這個首頁分配給當前角色的時候,它所定義的api也賦值給他了。
那么我們拉請求另外一個api。后算修改下delete的action
removeDemos肯定是無權限的,因為沒有配置。
第一個請求是200,第二個請求是403錯誤
菜單管理,注意:刪除不是一個頁面。我們當做按鈕來處理
分配權限,這里有個刪除
退出后台,重新登陸。再次訪問
注意事項:一般是一個請求執行完成后,再去執行另外一個請求。
結束