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