此模版 用到的是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這個可以根據不同的環境來切換 地址
到這里 登錄的功能 算是實現了 其實這里可以登錄完成后 獲取用戶的基本權限來生成路由表 以實現動態路由