Vue項目中實現使用者登入及token驗證

標籤：rect   catch   imp   pmu   token   The   NPU   分享   form   

在前後端完全分離的情況下，Vue項目中實現token驗證大致思路如下：

1、第一次登入的時候，前端調後端的登陸介面，發送使用者名稱和密碼

2、後端收到請求，驗證使用者名稱和密碼，驗證成功，就給前端返回一個token

3、前端拿到token，將token儲存到localStorage和vuex中，並跳轉路由頁面

4、前端每次跳轉路由，就判斷 localStroage 中有無 token ，沒有就跳轉到登入頁面，有則跳轉到對應路由頁面

5、每次調後端介面，都要在要求標頭中加token

6、後端判斷要求標頭中有無token，有token，就拿到token並驗證token，驗證成功就返回資料，驗證失敗（例如：token到期）就返回401，要求標頭中沒有token也返回401

7、如果前端拿到狀態代碼為401，就清除token資訊並跳轉到登入頁面

vue-cli搭建一個項目，簡單說明前端要做的事：

一、調登入介面成功，在回呼函數中將token儲存到localStorage和vuex中

login.vue

<template>  <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>

store檔案夾下的index.js

import Vue from ‘vue‘;import Vuex from ‘vuex‘;Vue.use(Vuex); const store = new Vuex.Store({   state: {    // 儲存token    Authorization: localStorage.getItem(‘Authorization‘) ? localStorage.getItem(‘Authorization‘) : ‘‘  },   mutations: {    // 修改token，並將token存入localStorage    changeLogin (state, user) {      state.Authorization = user.Authorization;      localStorage.setItem(‘Authorization‘, user.Authorization);    }  }}); export default store;

二、路由導航守衛

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 註冊一個全域前置守衛，判斷使用者是否登陸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;

三、要求標頭加token

// 添加請求攔截器，在要求標頭中加tokenaxios.interceptors.request.use(  config => {    if (localStorage.getItem(‘Authorization‘)) {      config.headers.Authorization = localStorage.getItem(‘Authorization‘);    }     return config;  },  error => {    return Promise.reject(error);  });

四、如果前端拿到狀態代碼為401，就清除token資訊並跳轉到登入頁面

      localStorage.removeItem(‘Authorization‘);      this.$router.push(‘/login‘);

 

Vue項目中實現使用者登入及token驗證