手把手教你用vue-clic3搭建vue-element-admin項目

1. 下載element-admin框架

點擊該地址：https://github.com/PanJiaChen/vue-element-admin

用git clone https://github.com/PanJiaChen/vue-element-admin或者直接下載壓縮包均可以

 

 

 

 

 

 

 

2.安裝依賴

打開項目根目錄，在根目錄下使用npm install 安裝依賴，這種方式可能耗時較長，可採用鏡像安裝npm install --registry=https://registry.npm.taobao.org。在這裏我用webstorm作開發工具演示。

安裝完成後，會在今生成一個依賴文件夾

 

 3.修改配置

最新版本生成的項目的配置文件沒有了config文件夾，配置文件主要放在了vue.config.js裏面，簡單介紹一下重點的配置：

 

 

 

 

如今打開vue.config.js修改裏面的配置

 

 

如今後臺接口修改完成，那麼如何登錄成功呢？接下來找到view->login->index.vue找到登陸方法，能夠看到在該方法裏調用了store裏面的login方法，

 

 

再來，找到store->modules->user.js文件，找到login方法，能夠看到在方法裏面調用了login接口，按住ctrl鍵點擊login會跳轉到該接口的文件

 

 

 

 

在這裏能夠看到請求登陸接口是用的一個封裝好的request請求，該文件裏面包含了請求攔截和響應攔截，如今咱們打開這個request文件看一下里面的邏輯。

 

 

攔截請求，先判斷store裏面是否有token,若是沒有直接返回原config對象，login接口請求攔截解除，繼續調接口，接口請求成功後，回到store的login方法裏面走then,將獲取到的response展開處理,給store的state設置token值（以便後期請求攔截時從store中直接獲取token進而來判斷是否要在header中添加‘X-Token’驗證。爲何不直接用cookie中的token呢？這個問題在官網中有講解過，在這順便簡單介紹一下：若是在A臺電腦上登陸了，在B臺電腦上也登錄，同時，在B臺電腦上修改了我的信息，此時A臺電腦的用戶信息是從緩存中取出來的，因此仍然是修改以前的信息，除非退出登陸），同時給cookie中的'Admin-Token’設值。緊接着store的login方法結束以後回到index.vue的登陸方法，而後開始路由跳轉。路由跳轉也添加了攔截，在該攔截裏，會根據緩存中的token去判斷，若是有token且路由是/login，直接放行，若是沒有token,在白名單裏直接跳，不在白名單裏調到登陸頁,若是有token且不是/login則去store裏得到角色信息

 

 

 

 

 

 

 

 

回到路由攔截的permission.js文件，拿到用戶角色roles，將其傳遞給store的生成路由配置的方法（生成左側菜單欄）

 

 

判斷角色是不是admin若是是，會將常量路由和權限路由所有添加並返回，若是是其餘權限，會根據權限篩選返回

 

 

4.給新添加的頁面配置權限

 

 

 

 以上就是一個基本的流程邏輯，結束嘍~