主頁(yè)模塊功能實(shí)現(xiàn)
1.登錄頁(yè)成功之后，跳轉(zhuǎn)進(jìn)入主頁(yè)? 路由跳轉(zhuǎn)： this.$router.push(地址)
2.通過(guò)路由導(dǎo)航守衛(wèi) 實(shí)現(xiàn)跳轉(zhuǎn)限制? 優(yōu)化設(shè)置白名單數(shù)組 關(guān)鍵字includes(to.path)? true/false
? ? ? ? (1)登陸用戶不能再次回到login?
? ? ? ? (2)沒(méi)有登陸就不能訪問(wèn)除login之外的其它頁(yè)
? ? ? ? (3) beforeEach中啟動(dòng)進(jìn)度條，在afterEach中停止進(jìn)度條
3. 優(yōu)化左側(cè)導(dǎo)航樣式 ,設(shè)置內(nèi)容布局
4. 路由跳轉(zhuǎn)時(shí)，獲取用戶個(gè)人信息,保存到vuex
? ? ? (1) 在api/user 中封裝好 用戶信息接口? store/user? 中調(diào)用該方法 $store.dispatch()
? ? ? (2) 路由守衛(wèi)中 發(fā)送axios 請(qǐng)求 (注意點(diǎn):添加模塊名) 異步函數(shù)actions中定義該方法?
? ? ? (3) state中 定義空對(duì)象? 通過(guò)commit 方法修改? context.commit('方法名',參數(shù))
? ? ? (4)? 獲取用戶id , 封裝api接口獲取員工基本信息 傳參id
? ? ? (5) 根據(jù)用戶id（rs.data.userId）調(diào)用api發(fā)送請(qǐng)求，獲取詳情（包含頭像）
? ? ? (6) 通過(guò)展開(kāi)運(yùn)算符 {...obj1,...obj2}合并對(duì)象 傳參? 調(diào)用commit 方法修改 存到state對(duì)象中
? ? ? (7) 渲染頁(yè)面 (用戶頭像/用戶名)? this.$store.state.模塊名.數(shù)據(jù)項(xiàng)
? 5.用戶退出
? (1) 清空token 用戶基本信息 (觸發(fā)事件源,調(diào)用actions中封裝的方法,清空數(shù)據(jù))
? (2) 退出到登錄并攜帶參數(shù)? ?
? ? ? ? 2.1? 通過(guò)局部路由對(duì)象$route? 獲取當(dāng)前頁(yè)面的的路徑 this.$route.fullPath
? ? ? ? 2.2? ? 登錄頁(yè)面 定義變量 來(lái)接收 該路徑? this.$router.push('/login?return_url='+ encodeURIComponent(this.$route.fullPath) )
? ? ? ? 2.3? ? (路徑拼接) 通過(guò) encodeURIComponent() 方法 對(duì)url進(jìn)行編碼
? ? ? ? 注意點(diǎn): router是通過(guò)“Vue.use (VueRouter)”和VueRouter構(gòu)造函數(shù)得到一個(gè)實(shí)例對(duì)象，它是一個(gè)全局的對(duì)象。?route是一個(gè)跳轉(zhuǎn)的路由對(duì)象，每一個(gè) 路由都會(huì)有一個(gè)route對(duì)象，是一個(gè)局部的對(duì)象。?
? (3)登錄成功 不進(jìn)入主頁(yè)=>進(jìn)入指定的頁(yè)面(退出之前的頁(yè)面)
? ? ? 3.1 通過(guò)this.$route.query.變量名 記錄登錄前的頁(yè)面地址 ,實(shí)現(xiàn)跳轉(zhuǎn)登錄前頁(yè)面
? ? ? 3.2? 無(wú)退出? 跳轉(zhuǎn)路徑不存在? 通過(guò)短路運(yùn)算 跳轉(zhuǎn)主頁(yè)
6. token失效優(yōu)化
? 1.與用戶退出功能一致,在響應(yīng)攔截器中，分析接口的返回值，如果狀態(tài)碼為10002， 則進(jìn)行token失效操作
? 2.清空token與用戶信息
? 3. router.currentRoute.fullPath 獲取退出前頁(yè)面地址?
