vue頁面控制權限,vuex刷新保存狀態、登陸狀態保存

對於一個網站，有些頁面是須要登陸後才能訪問的，這個時候須要作到權限管理

---

一、頁面權限控制

---

這個常見作法是，在路由跳轉的時候作判斷，經過router鉤子函數判斷頁面是否須要登陸

首先在router配置 meta屬性

而後在鉤子函數裏面判斷

to.meta.requireAuth爲true就跳去登陸頁面登陸，不然就直接到要訪問的頁面

---

二、vuex頁面F5刷新後維持刷新前的狀態不變

---

對於在當前訪問網頁使用F5刷新以後，頁面的變量和參數都會丟失，這時頁面顯示的內容會變得不友好，用戶體驗很差，咱們能夠經過將頁面的參數和變量保存到sessionStorage中，當刷新後再從sessionStorage將變量和狀態取回來渲染回頁面，那樣F5刷新後，用戶看到的頁面仍是刷新前的。

首先在store的index.js中，state，增長頁面要保存的變量，而且將它們的值和sessionStorage裏面的綁定

而後再新增mutations，這是將變量寫入sessionStorage的方法

接着就能夠在登陸函數中這樣調用，登陸成功後將須要的變量寫進sessionStorage

在路由的鉤子函數裏面能夠這樣將變量取回來，那樣頁面刷新後，也能將刷新前的狀態保持

---

三、登陸狀態保存

---

咱們在網頁中，經常有一個功能，就是像下圖那樣，勾選後十天內免登陸，也就是記住登陸狀態

這個較上面的功能有一個不同的地方就是，上面的刷新，假如我是登陸狀態，我將瀏覽器關閉以後再打開，再打開瀏覽器，我仍是須要登陸的

那若是我勾選了十天內免登陸，登陸後沒有退出，而後把瀏覽器關閉了，再從新打開，是不須要登陸的，這個功能怎麼實現呢?

這就要用到localStorage來實現了

首先，同樣須要在store的index.js中，state，增長頁面要保存的變量，而且將它們的值和localStorage裏面的綁定

而後再新增mutations，這是將變量寫入localStorage的方法

---

須要一個自動登陸的方法，若是是勾選了就爲true，而後就會將須要用到的變量寫到localStorage

固然還有登出的

接着就能夠在登陸函數中，根據有沒有勾選自動登陸來判斷，是否是在登陸成功後將須要的變量寫進localStorage

最後在路由的鉤子函數裏面作相應的處理

是否是須要登陸，而後有沒有勾選自動登陸，根據布爾值來進行不一樣的路由操做，而後須要用到的變量操做其實和上面保持頁面刷新後的是大同小異的

固然這裏還須要一個後臺的校驗接口，就是在勾選了自動登陸後，若是是10天期限，那就要在進入true 的分支後再請求後臺去校驗token是否過時，若是過時就要從新登陸了，不然就一切照常

---

小結

---

此次總結了前端頁面登陸校驗的常見三種狀況，在平常開發中常常遇到，若有紕漏請指出和交流