vue-admin-template搭建后台管理系統的學習(二)登錄


此模版 用到的是mock模擬數據,在store中管理用戶狀態

我們一步步改為我們自己想要的東西 即 在實際項目中我們是怎么實現登錄的

1.我們先找到這個登錄頁

 

打開這個登錄頁在點擊登錄的時候有一個方法

 

 

上面的圖中 紅框 部分 標記的意思是 在store文件中找到user文件中的login方法

 

 

 找到了這里就是處理登錄的地方  我們往下看 會看到一個Login方法

 

兩個login 第一個是在store=>user中定義的方法用於將用戶的狀態存起來,第二個 就是我們的 請求了 看到這個就很熟悉來吧。 我們接着找  這個Login請求在這里導入的store=>user文件的開頭。如下圖:

 

 

 這個Login在api=>user  如下圖:

 

找到了 這個方法 我們又看到了$http 接着找 打開utils=>http(這里的http文件是基於axios封裝的request請求,在基礎模版中也進行了封裝,根據自己的需求來封裝,)

我們在打開httpt文件找到$http

 

 就是封裝的一個http請求,我的主要有 對請求的攔截 給每個請求賽入token 以及 響應攔截器 對於返回的code做處理

到這里我們就找到了 登錄用到的整個方法 下面 修改 配置

我們先找到 vue.config.js 

 

 把標記的地方去掉(意思是用的們mock中的數據,這里我們用實際數據,所以不要,關於這個mock文件 你可以刪掉,當然你可以配置本地環境也可以用mock,兩種可以切換,網上可以查查)

在找到

 

 這兩個文件 development —開發環境 production—生產環境

把這 development 文件VUE_APP_BASE_API

 

改為你真實的接口請求地址(域名或IP)

在看回 上文提到的 api=>user

 

 這里只用填 你接口的路徑

 VUE_APP_BASE_API這個可以根據不同的環境來切換 地址

 到這里 登錄的功能 算是實現了 其實這里可以登錄完成后 獲取用戶的基本權限來生成路由表 以實現動態路由

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM