vue登入註冊，帶token驗證

Vue專案中實現token驗證大致思路如下：

其過程大致如下：
① 使用者首次登入，將輸入的賬號和密碼提交給伺服器

② 伺服器對輸入內容進行校驗，若賬號和密碼匹配則驗證通過，登入成功，並生成一個token值，將其儲存到資料庫，並返回給客戶端

③ 客戶端拿到返回的token值將其儲存在本地（如cookie/local storage），作為公共引數，以後每次請求伺服器時都攜帶該token（放在響應頭裡），提交給伺服器進行校驗

④ 伺服器接收到請求後，首先驗證是否攜帶token，若攜帶則取出請求頭裡的token值與資料庫儲存的token進行匹配校驗，若token值相同則登入成功，且當前正處於登入狀態，此時正常返回資料，讓app顯示資料；若不存在或兩個值不一致，則說明原來的登入已經失效，此時返回錯誤狀態碼，提示使用者跳轉至登入介面重新登入

⑤ 注意：使用者每進行一次登入，登入成功後伺服器都會更新一個token新值返回給客戶端

第一步，建立元件

Login.vue

 <div>
    <input type="text" v-model="loginForm.username" placeholder="使用者名稱"/>
    <input type="text" v-model="loginForm.password" placeholder="密碼"/>
    <button @click="login">登入</button>
  </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
 data () {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    ...mapMutations(['changeLogin']),
    login () {
      let _this = this;
      if (this.loginForm.username === '' || this.loginForm.password === '') {
        alert('賬號或密碼不能為空');
      } else {
        this.axios({
          method: 'post',
          url: '/user/login',
          data: _this.loginForm
        }).then(res => {
          console.log(res.data);
          _this.userToken = 'Bearer ' + res.data.data.body.token;
          // 將使用者token儲存到vuex中
          _this.changeLogin({ Authorization: _this.userToken });
          _this.$router.push('/home');
          alert('登陸成功');
        }).catch(error => {
          alert('賬號或密碼錯誤');
          console.log(error);
        });
      }
    }
  }
};
</script>


-----------------------------------------------------------------------------------------------------------------------

## router資料夾下的index.js
import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/components/Login';
import home from '@/components/home';
 Vue.use(Router);
const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/Login'
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: home
    }
  ]
});
## // 使用 router.beforeEach 註冊一個全域性前置守衛，判斷使用者是否登陸
javascript
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next();
  } else {
    let token = localStorage.getItem('Authorization');
 
    if (token === 'null' || token === '') {
      next('/login');
    } else {
      next();
    }
  }
});
export default router;