vue專案中使用token的身份驗證的簡單實踐

禾寸發表於2019-03-01
Vue

工作原理

  1. 前端頁面進行登入操作, 將使用者名稱與密碼發給伺服器;
  2. 伺服器進行效驗, 通過後生成token, 包含資訊有金鑰, uid, 過期時間, 一些隨機演算法等 ,然後返回給前端
  3. 前端將token儲存在本地中, 建議使用localstorage進行儲存. 下次對伺服器傳送請求時, 帶上本地儲存的token
  4. 伺服器端,進行對token的驗證, 通過的話, 進行相應的增刪改查操作, 並將資料返回給前端
  5. 為通過則返回錯誤碼, 提示保錯資訊, 然後跳轉到登入頁.

具體步驟

所用技術: vuex + axios + localStorage + vue-router

  1. 在登入路由新增自定義mate欄位, 來記錄該頁面是否需要身份驗證
//router.js
{
    path: "/index",
    name: "index",
    component: resolve => require(['./index.vue'], resolve),
    meta: { 
        requiresAuth: true 
    }
} 
複製程式碼
  1. 設定路由攔截
router.beforeEach((to, from, next) => {
    //matched的陣列中包含$route物件的檢查元欄位
    //arr.some() 表示判斷該陣列是否有元素符合相應的條件, 返回布林值
    if (to.matched.some(record => record.meta.requiresAuth)) {
        //判斷當前是否有登入的許可權
        if (!auth.loggedIn()) {
            next({
                path: '/login',
                query: { redirect: to.fullPath }
            })
        } else {
            next()
        }
    } else {
        next() // 確保一定要呼叫 next()
    }
})
複製程式碼
  1. 設定攔截器
    這裡使用axios的攔截器，對所有請求進行攔截判斷。
    在後面的所有請求中都將攜帶token進行. 我們利用axios中的攔截器, 通過配置http response inteceptor, 當後端介面返回401 (未授權), 讓使用者重新執行登入操作。
// http request 攔截器
axios.interceptors.request.use(
    config => {
        if (store.state.token) {  // 判斷是否存在token，如果存在的話，則每個http header都加上token
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

// http response 攔截器
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 返回 401 清除token資訊並跳轉到登入頁面
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        return Promise.reject(error.response.data)   // 返回介面返回的錯誤資訊
});
複製程式碼
  1. 將token儲存在本地中
    可以使用cookies/local/sessionStograge

三者的區別:

  • sessionStorage 不能跨頁面共享的，關閉視窗即被清除，
  • localStorage 可以同域共享，並且是持久化儲存的
  • 在 local / session storage 的 tokens，就不能從不同的域名中讀取,甚至是子域名也不行.
    解決辦法使用Cookie.demo: 假設當使用者通過 app.yourdomain.com 上面的驗證時你生成一個 token 並且作為一個 cookie 儲存到 .yourdomain.com,然後，在 youromdain.com 中你可以檢查這個 cookie 是不是已經存在了，並且如果存在的話就轉到 app.youromdain.com去。這個 token 將會對程式的子域名以及之後通常的流程都有效（直到這個 token 超過有效期） 只是利用cookie的特性進行儲存而非驗證.

關於XSS和XSRF的防範:

  • XSS 攻擊的原理是，攻擊者插入一段可執行的 JavaScripts 指令碼，該指令碼會讀出使用者瀏覽器的 cookies 並將它傳輸給攻擊者，攻擊者得到使用者的 Cookies 後，即可冒充使用者。
  • 防範 XSS ，在寫入 cookies 時，將 HttpOnly 設定為 true，客戶端 JavaScripts 就無法讀取該 cookies 的值，就可以有效防範 XSS 攻擊。
  • CSRF是一種劫持受信任使用者向伺服器傳送非預期請求的攻擊方式。
  • 防範 CSRF: 因為 Tokens 也是儲存在本地的 session storage 或者是客戶端的 cookies 中，也是會受到 XSS 攻擊。所以在使用 tokens 的時候，必須要考慮過期機制，不然攻擊者就可以永久持有受害使用者帳號。

相關文章: XSS 和 CSRF簡述及預防措施

    //login.vue
    methods: {
        login(){
            if (this.token) {
                //儲存在本地的localStograge中
                this.$store.commit(types.LOGIN, this.token)
                //跳轉至其他頁面
                let redirect = decodeURIComponent(this.$route.query.redirect || '/');
                this.$router.push({
                    path: redirect
                })
            }
        }
    }
複製程式碼

在vuex中:

import Vuex from 'vuex';
import Vue from 'vue';
import * as types from './types'

Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        user: {},
        token: null,
        title: ''
    },
    mutations: {
        //登入成功將, token儲存在localStorage中
        [types.LOGIN]: (state, data) => {
            localStorage.token = data;
            state.token = data;
        },
        //退出登入將, token清空
        [types.LOGOUT]: (state) => {
            localStorage.removeItem('token');
            state.token = null
        }
    }
});
複製程式碼

在./types.js中:

export const LOGIN = 'login';
export const LOGOUT = 'logout';
複製程式碼

就介紹到這裡了。。。

vue專案中使用token的身份驗證的簡單實踐

相關文章