Vue2.0一個login跳轉實例

需要解決的問題：
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文件中

<script>
        export default {
            data() {
                return {
                    name:'',
                    pwd:'',
                    error:''
                }
            },
            computed: {
                user() {
                    return this.$store.state.user
                }
            },
            methods:{
                isLogin:function() {
                    this.$http.get('http://localhost:3000/users?username='+this.name+'&password='+this.pwd).then((response) => { 
                        //這里在isLogin方法中先判斷一下后台返回的是否為空值，如果不是然后提交后台返回的值。
                        //注意這里是個難點，Vuex與Vue-Resource結合使用。 
                        if(response.body != null & response.body.length > 0){ 
                            this.$store.commit('isLogin',response.body[0]);
                            this.name=''
                            this.pwd= ''
                            this.$router.push({ path: 'main' }) 
                        }else{
                            alert('請輸入正確的用戶名和密碼！！！');
                            this.name=''
                            this.pwd= ''
                        }
                        
                    }).then((error)=> this.error = error)
                }
            }
        }
    </script>

接下來是Main.vue ,這個頁面很簡單，簡單的寫一些內容作為測試是否登錄跳轉成功。

<template>
    <div>
        <h1>Hello Main！</h1>
        <section v-show="user">
        <!-- 這里的user是從下面JavaScript的computed的user()方法中得到的。 -->
            <p>歡迎{{user.username}}</p>
        </section>
    </div>
</template>
<script>
    export default {
        computed: {
            user(){
                 //因為在main.js中已經全局注冊了store，所以這里直接用this.$直接使用。
                return this.$store.state.user
            }
        }
    }
</script>

下面來配置一下路由。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來保存數據。

源碼參考
原文地址

---

歡迎大神糾察指正，也希望前端愛好者提出寶貴意見，一起學習，一塊交流討論。喜歡的話請點個贊吧。（感謝閱讀）