寫在前面：
項(xiàng)目地址：GitHub - jianjiayi/Merchant: vue全家桶開發(fā)商戶后臺管理，vue2.0手把手教你開發(fā)商戶管理端后臺
有什么不明白的，可以發(fā)郵件給我：m13121378101@163.com；
在上一篇文章我們已經(jīng)搭建好了一個基本的后臺頁面，沒有看到的同學(xué)，可以點(diǎn)這里vue2.0手把手教你開發(fā)商戶管理端后臺（一）之基礎(chǔ)篇 - 簡書
還記得嗎，我們在編寫路由的時候特意留下了一個字段：auth:false;
現(xiàn)在來說下，定義這個字段，就說當(dāng)跳轉(zhuǎn)路由的時候，如果auth == false的話，那么我們就要求用戶必須登錄才能查看。
一、什么叫：路由守衛(wèi)？
這里借用下官網(wǎng)說的：可以查看官網(wǎng)解釋：Vue Router | 導(dǎo)航守衛(wèi)
正如其名，vue-router?提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種機(jī)會植入路由導(dǎo)航過程中：全局的, 單個路由獨(dú)享的, 或者組件級的。
記住參數(shù)或查詢的改變并不會觸發(fā)進(jìn)入/離開的導(dǎo)航守衛(wèi)。你可以通過觀察?$route?對象來應(yīng)對這些變化，或使用?beforeRouteUpdate?的組件內(nèi)守衛(wèi)。
二、如何實(shí)現(xiàn)路由守衛(wèi)？
1、在src/views文件下新建login.vue:
2、在src/router/index.js下添加如下路由信息：
3、我們在修改main.js，添加路由守衛(wèi)：
現(xiàn)在重啟下項(xiàng)目：npm run dev，在瀏覽器輸入：http://localhost:8080/#/
是不是自動跳轉(zhuǎn)到：http://localhost:8080/#/login這個鏈接了。
在地址連輸入這個鏈接：http://localhost:8080/#/goods/list，是不是頁跳轉(zhuǎn)到了登錄頁
這樣就添加上了路由守衛(wèi)。
這樣看著太不美觀了吧！我隨便輸入一個地址，定義好的跳轉(zhuǎn)了login，沒有定義的就不跳轉(zhuǎn)了，應(yīng)該調(diào)到404頁面呀！那我們?nèi)懸粋€404頁面吧！
4、在src/views文件下新建目錄如下：
????404.vue代碼：
再去修改src/router/index.js路有文件：
我們在瀏覽器地址欄 輸入：http://localhost:8081/#/111111
是不是就直接跳轉(zhuǎn)到：http://localhost:8081/#/404
我們在美化下login.vue頁面和404頁面吧！
1、login.vue:
2、404.vue:這個頁面就隨便找個圖片添加就可以了
我們下效果圖：
三、如何保存用戶登錄信息呢？
用戶信息放到store里但是需要緩存到sessionStorage中,如：
store.js中：
state: {
? ? userInfo: sessionStorage.getItem('xxx-info');
},
mutations: {
? ? setUserInfo(state, info) {
? ? ? ? state.userInfo=info;
? ? ? ? sessionStorage.setItem('xxx-info', info);
? ? }
}
登錄成功：
this.$store.commit('setUserInfo',info);
需要用戶數(shù)據(jù)直接vuex中獲取：
this.$store.state.userInfo;
