資訊專欄INFORMATION COLUMN
摘要：請(qǐng)輸入正確的用戶名和密碼接下來是這個(gè)頁面很簡(jiǎn)單，簡(jiǎn)單的寫一些內(nèi)容作為測(cè)試是否登錄跳轉(zhuǎn)成功。路由攔截中判斷對(duì)象是否為空。
需要解決的問題：
store存儲(chǔ)登錄狀態(tài)
Vue-Router導(dǎo)航鉤子攔截路由
Vue-Resource獲取后臺(tái)的數(shù)據(jù)
需要判斷登錄返回的user
源碼參考
原文地址
主要技術(shù)棧：Vuex + Vue-Resource + Vue-Router
后臺(tái)用mock-data來模擬數(shù)據(jù)。
先來看一下效果圖
第一步、起個(gè)項(xiàng)目打開控制臺(tái)輸入
$ npm install --global vue-cli#創(chuàng)建一個(gè)自己的基于webpack的新項(xiàng)目 $ vue init webpack my-project(這里是你自己的工程名) $ cd my-project(進(jìn)到你的工程文件夾下) $ npm install (安裝依賴) $ npm run dev
注意：起工程的時(shí)候回讓你選擇ESLint,Test等等各種測(cè)試，這里都默認(rèn)選no就可以。
現(xiàn)在你的項(xiàng)目應(yīng)該跑起來了。打開控制臺(tái)輸入npm run dev
應(yīng)該是這樣的。
好了起項(xiàng)目成功了，接下來擼起袖子加油干吧。
先來看一下項(xiàng)目結(jié)構(gòu):
第二步、配置一下mock-data。
{
"users": [
{
"id" : 1,
"username": "aaa",
"password": "aaa"
},
{
"id" : 2,
"username": "bbb",
"password": "bbb"
},
{
"id": 3,
"username": "ccc",
"password": "ccc"
}
]
}
這里給指定了三個(gè)用戶名和密碼，在login登陸的時(shí)候只有輸入正確的用戶名和密碼才可以登陸實(shí)現(xiàn)頁面的跳轉(zhuǎn)。
第三步 配置view視圖層Login.vue文件中
接下來是Main.vue ,這個(gè)頁面很簡(jiǎn)單，簡(jiǎn)單的寫一些內(nèi)容作為測(cè)試是否登錄跳轉(zhuǎn)成功。
Hello Main！
歡迎{{user.username}}
下面來配置一下路由。routes.js
//先引入需要路由的文件
import Main from "../components/Main"
import Login from "../components/Login"
export default [
{
path: "/login",
component: Login
},
{
path: "/main",
meta: {
// 添加該字段，表示進(jìn)入這個(gè)路由是需要登錄的
requireAuth: true,
},
component: Main,
}
]
接下來是main.js(這里只對(duì)重點(diǎn)拿出來細(xì)說)
// 全局導(dǎo)航鉤子
router.beforeEach((to, from, next) => {
// 判斷該路由是否需要登錄權(quán)限
if (to.meta.requireAuth) {
// 通過vuex state獲取當(dāng)前的token是否存在
// console.log(isEmptyObject(store.state.user))
if(!isEmptyObject(store.state.user)) {
next();
}
else {
next({
path: "/login",
query: {redirect: to.fullPath} // 將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由
})
}
}
else {
next();
}
})
function isEmptyObject(obj) {
for (var key in obj) {
return false;
}
return true;
}
重點(diǎn)參考鏈接
路由攔截導(dǎo)航。路由攔截
JavaScipt中判斷對(duì)象是否為空。點(diǎn)擊這里
存在的問題及待解決的問題： 登陸數(shù)據(jù)存在store中，每次刷新頁面都會(huì)沒有了。接下來要用LocalStorage或者Cookie來保存數(shù)據(jù)。
源碼參考
原文地址
歡迎大神糾察指正，也希望前端愛好者提出寶貴意見，一起學(xué)習(xí)，一塊交流討論。喜歡的話請(qǐng)點(diǎn)個(gè)贊吧。（感謝閱讀）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81885.html
摘要：做項(xiàng)目過程中，需要用到后臺(tái)模擬數(shù)據(jù)，在機(jī)緣巧合下發(fā)現(xiàn)了，在學(xué)習(xí)使用的過程中又偶遇了。 做項(xiàng)目過程中，需要用到后臺(tái)模擬數(shù)據(jù)，在機(jī)緣巧合下發(fā)現(xiàn)了mock，在學(xué)習(xí)使用的過程中又偶遇了axios-mock-adapter。現(xiàn)在將實(shí)例展示如下： 準(zhǔn)備 實(shí)例是建立在vue-cli的基礎(chǔ)上實(shí)現(xiàn)需要提前安裝的插件有：axios：npm install axio --savemockjs：npm ins...
摘要：實(shí)例中，可追蹤數(shù)據(jù)發(fā)生變化時(shí)，會(huì)開啟一個(gè)隊(duì)列，把變化記錄其中，在下一次事件循環(huán)前，進(jìn)行去重優(yōu)化，然后重新渲染。最早通過實(shí)現(xiàn)了這一需求，通過事件可監(jiān)聽的變化，實(shí)現(xiàn)不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動(dòng)畫效果 單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。(定...
摘要：實(shí)例中，可追蹤數(shù)據(jù)發(fā)生變化時(shí)，會(huì)開啟一個(gè)隊(duì)列，把變化記錄其中，在下一次事件循環(huán)前，進(jìn)行去重優(yōu)化，然后重新渲染。最早通過實(shí)現(xiàn)了這一需求，通過事件可監(jiān)聽的變化，實(shí)現(xiàn)不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動(dòng)畫效果 單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。(定...
摘要：實(shí)例中，可追蹤數(shù)據(jù)發(fā)生變化時(shí)，會(huì)開啟一個(gè)隊(duì)列，把變化記錄其中，在下一次事件循環(huán)前，進(jìn)行去重優(yōu)化，然后重新渲染。最早通過實(shí)現(xiàn)了這一需求，通過事件可監(jiān)聽的變化，實(shí)現(xiàn)不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動(dòng)畫效果 單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。(定...
閱讀 3031·2021-11-12 10:36
閱讀 4773·2021-09-22 10:57
閱讀 1584·2021-09-22 10:53
閱讀 2673·2019-08-30 15:55
閱讀 3504·2019-08-29 17:00
閱讀 3362·2019-08-29 16:36
閱讀 2478·2019-08-29 13:46
閱讀 1356·2019-08-26 11:45
