1、頁面權(quán)限控制
這個(gè)常見做法是阀溶，在路由跳轉(zhuǎn)的時(shí)候做判斷腻脏，通過router鉤子函數(shù)判斷頁面是否需要登錄
首先在router配置 meta屬性
然后在鉤子函數(shù)里面判斷
to.meta.requireAuth為true就跳去登錄頁面登錄鸦泳，否則就直接到要訪問的頁面
2、vuex頁面F5刷新后維持刷新前的狀態(tài)不變
首先在store的index.js中永品，state做鹰，增加頁面要保存的變量，并且將它們的值和sessionStorage里面的綁定
然后再新增mutations鼎姐，這是將變量寫入sessionStorage的方法
接著就可以在登錄函數(shù)中這樣調(diào)用钾麸，登錄成功后將需要的變量寫進(jìn)sessionStorage
在路由的鉤子函數(shù)里面可以這樣將變量取回來，那樣頁面刷新后炕桨，也能將刷新前的狀態(tài)保持
3饭尝、登錄狀態(tài)保存
我們?cè)诰W(wǎng)頁中，常常有一個(gè)功能献宫，就是像下圖那樣钥平，勾選后十天內(nèi)免登錄，也就是記住登錄狀態(tài)
這個(gè)較上面的功能有一個(gè)不一樣的地方就是姊途，上面的刷新涉瘾，假如我是登錄狀態(tài)，我將瀏覽器關(guān)閉之后再打開捷兰，再打開瀏覽器立叛，我還是需要登錄的
那如果我勾選了十天內(nèi)免登錄，登錄后沒有退出贡茅，然后把瀏覽器關(guān)閉了秘蛇，再重新打開，是不需要登錄的友扰，這個(gè)功能怎么實(shí)現(xiàn)呢?
這就要用到localStorage來實(shí)現(xiàn)了
首先彤叉，一樣需要在store的index.js中，state村怪，增加頁面要保存的變量秽浇，并且將它們的值和localStorage里面的綁定
然后再新增mutations，這是將變量寫入localStorage的方法
需要一個(gè)自動(dòng)登錄的方法甚负，如果是勾選了就為true柬焕，然后就會(huì)將需要用到的變量寫到localStorage
當(dāng)然還有登出的
接著就可以在登錄函數(shù)中，根據(jù)有沒有勾選自動(dòng)登錄來判斷梭域，是不是在登錄成功后將需要的變量寫進(jìn)localStorage
最后在路由的鉤子函數(shù)里面做相應(yīng)的處理
是不是需要登錄斑举，然后有沒有勾選自動(dòng)登錄，根據(jù)布爾值來進(jìn)行不同的路由操作病涨，然后需要用到的變量操作其實(shí)和上面保持頁面刷新后的是大同小異的
當(dāng)然這里還需要一個(gè)后臺(tái)的校驗(yàn)接口富玷，就是在勾選了自動(dòng)登錄后，如果是10天期限，那就要在進(jìn)入true 的分支后再請(qǐng)求后臺(tái)去校驗(yàn)token是否過期赎懦，如果過期就要重新登錄了雀鹃，否則就一切照常
