Vue實戰之vue登入驗證的實現程式碼 程式前沿 | vue會員登入
最近一直在擼一個給大學生新生用的產品,在擼的時候有時候會發現自己力不從心,是不是我的能力下降,是不是我該放棄我的最熱愛的事業了?這對我的心靈造成了巨大的傷害,所以我決定向蒼老師起誓一定練好我這雙手——好好寫程式碼(想多的同學趕緊去面壁5秒鐘再過來往下看)~~~我做的這個產品是課堂線上程式設計教學工具,由於涉及到商業問題,這裡就不能和大家分享了,但是我可以把裡面我認為很牛(zhuang)X(bi)的技術和大家分享分享啊。如果你覺得我寫的很low的話歡迎加入igeekbar裙裡來噴我啊,我在那裡等你啊,我相信讚美會有...
最近一直在擼一個給大學生新生用的產品,在擼的時候有時候會發現自己力不從心,是不是我的能力下降,是不是我該放棄我的最熱愛的事業了?這對我的心靈造成了巨大的傷害,所以我決定向蒼老師起誓一定練好我這雙手——好好寫程式碼(想多的同學趕緊去面壁5秒鐘再過來往下看)~~~
我做的這個產品是課堂線上程式設計教學工具,由於涉及到商業問題,這裡就不能和大家分享了,但是我可以把裡面我認為很牛(zhuang)X(bi)的技術和大家分享分享啊。
如果你覺得我寫的很 low的話歡迎加入igeekbar裙裡來噴我啊,我在那裡等你啊,我相信讚美會有很多故事喲。哈哈,廢話不多說了,進入乾貨分享啦~~~
先從登入分享吧,登入是我寫完專案後加上的,一開始沒有考慮到登入問題,後來加的,看了一些人分享的登入,感覺都太牛逼了(主要我理解能力差看不懂)。最後自己搞了一套。
使用的技術:
vuevue-routervuex
首先明確的一點vue是一個寫但頁面的框架,以前在做登入的時候,也許是後端來控制登入的狀態,把登陸的資訊會放在cookie裡。前端也可以做登入驗證的,這主要是基於但頁面引入路由的功能得以實現的。
在vue-router裡有個鉤子函式 beforeEach (導航守衛)多霸氣的名字,故名YY就是這是我家沒我的邀請名片都給我滾蛋,還想過來和我一起看蒼老師。beforeEach 接受三個引數(to, from, next)分別是to: 小夥要去哪裡, from: 小夥從那裡來, next: 美女您請進,小心路滑啊。姑且你們認為我寫的很形象啊,如果你感到不服去看 文件 啊!
理解裡 beforeEach 那我們就可以區搞事情了。基本的思路是:
我要從router的資訊裡面拿到 meta 使用者的源資訊,如果沒有就讓這屌絲滾蛋,收拾帥氣點再來(也就是去登入)如果沒有源資訊的話,就等跳到 igeekbar 裙裡來瞅瞅,拿到入場圈(也就是登入後拿到了返回結果並存在router的源資訊中,用於之後路由跳轉的驗證)
寫到這裡突然感覺這貌似誰都懂的啊,不管了寫這麼多,就當你是小白吧(哈哈哈)
下面直接上程式碼:
在 router.js 路由中新增一下程式碼