Vue+SessionStorage實現簡單的登錄

我是基于vue腳手架cli做的,沒用過cli的可以看下我之前寫的cli腳手架搭建

(再補充一點,安裝腳手架的時候盡量選擇安裝路由。剩下的代碼規范那些可以選否)

后臺數據是用mock-data模擬的 下面會有具體步驟

開始啦:

1.初始化一個vue項目之后先來在目錄中創建mock-data.json文件,用于模擬數據

mock-data.json暫時寫了三條數據,用于隨后登陸用

2.vue-cli默認的打開頁面是hello.vue,此時我們在components中新建兩個文件

login.vue和list.vue分別用來登陸和另一個展示頁面

3.完善登陸頁面

list頁面隨便寫點東西就行了
login頁面template中先隨便寫下,樣式先不寫主要實現功能
然后在data中綁定model數據

我是把hello中的東西都刪了 寫了個登陸后顯示頁面 大家隨意 這塊無所謂(是不是寫的有點太細太基礎了。。下面加快節奏)

4.配置路由:文件建好了。接下來吧路由配置下,下面這個是正常配置的路由↓↓↓↓↓

注釋部分暫時忽略,權當沒看見
那么我們需要在這個基礎上添加個屬性,就是把注釋釋放開的效果(手動滑稽)

同樣在list里面也加上這個屬性 加這個屬性干啥呢?繼續看 下一步就知道了

5.此時路由弄好了,來到main.js中

在main.js中配置一個全局前置鉤子函數:router.beforeEach(),他的作用就是在每次路由切換的時候調用

這個鉤子方法會接收三個參數:to、from、next。

to:Route:即將要進入的目標的路由對象,

from:Route:當前導航正要離開的路由,

next:Function:個人理解這個方法就是函數結束后執行什么,先看官方解釋↓↓↓↓↓

1.next():進行管道中的下一個鉤子。如果全部鉤子執行完了,則導航的狀態就是confirmed(確認的),

2.next(false):中斷當前的導航。如果瀏覽器的url改變了(可能是用戶手動或瀏覽器后退按鈕),那么url地址會重置到from路由對應的地址。

3.next('/')或next({path:'/'}):跳轉到一個不同的地址。當前導航被中斷,進入一個新的導航。

這里可以把三個參數打出來看一下,在上面設置的needLogin字段就在to里面,接下來就會用到

6.判斷是否需要登錄

這里就用到了needLogin字段

對這個字段進行判斷,如果沒有這個字段說明不需要登錄就能查看的頁面 就讓他next()就行了

這里有個坑,next()必須寫上,next()必須寫上,next()必須寫上,不然會報錯↓↓↓↓↓

7.現在能知道哪個頁面需要登錄了 接下來來到login頁面

login.vue里面的button有一個login方法,在login中我們用axios驗證賬號密碼

安裝axios:cnpm install axios --save

在login中引入axios
接下來就可以在登錄頁面用axios了,具體步驟寫在注釋里了,更方便大家理解

8.我們把session存好后就可以在main.js中用了

好了,至此就完成了一個簡單的登錄了,瀏覽器關閉后sessionStorage會清空的,所以當用戶關閉瀏覽器再打開是需要重新登錄的

當然也可以手動清除sessionStorage,清除動作可以做成注銷登錄,這個就簡單了↓↓↓↓↓

寫一個清除session的方法

代碼不多 相信大家跟著來一遍就會了 ,有什么不足的希望大家能指正,共同學習!哪里不明白可以在下面評論,看到了我會解釋的

源碼地址:https://gitee.com/RtyXmd/vueDengLu.git


補充一點:有的朋友如果是直接clone下來的 安裝完依賴之后需要全局安裝json-server:cnmp install json-server -g

然后輸入json-server .\mock-data.json啟動之后就可以驗證數據了

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容