vue項目中如何使用token的身份驗證

這篇文章給大家分享的是有關(guān)vue項目中如何使用token的身份驗證的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

工作原理

• 前端頁面進行登錄操作, 將用戶名與密碼發(fā)給服務(wù)器;

• 服務(wù)器進行效驗, 通過后生成token, 包含信息有密鑰, uid, 過期時間, 一些隨機算法等 ,然后返回給前端

• 前端將token保存在本地中, 建議使用localstorage進行保存.  下次對服務(wù)器發(fā)送請求時, 帶上本地存儲的token

• 服務(wù)器端,進行對token的驗證, 通過的話, 進行相應(yīng)的增刪改查操作, 并將數(shù)據(jù)返回給前端

• 為通過則返回錯誤碼, 提示保錯信息, 然后跳轉(zhuǎn)到登錄頁.

具體步驟

所用技術(shù): vuex + axios + localStorage + vue-router

1、在登錄路由添加自定義mate字段, 來記錄該頁面是否需要身份驗證

//router.js
{
 path: "/index",
 name: "index",
 component: resolve => require(['./index.vue'], resolve),
 meta: { 
  requiresAuth: true 
 }
}

2、設(shè)置路由攔截

router.beforeEach((to, from, next) => {
 //matched的數(shù)組中包含$route對象的檢查元字段
 //arr.some() 表示判斷該數(shù)組是否有元素符合相應(yīng)的條件, 返回布爾值
 if (to.matched.some(record => record.meta.requiresAuth)) {
  //判斷當前是否有登錄的權(quán)限
  if (!auth.loggedIn()) {
   next({
    path: '/login',
    query: { redirect: to.fullPath }
   })
  } else {
   next()
  }
 } else {
  next() // 確保一定要調(diào)用 next()
 }
})

3、設(shè)置攔截器

這里使用axios的攔截器，對所有請求進行攔截判斷。

在后面的所有請求中都將攜帶token進行. 我們利用axios中的攔截器, 通過配置http response inteceptor, 當后端接口返回401 (未授權(quán)), 讓用戶重新執(zhí)行登錄操作。

// 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信息并跳轉(zhuǎn)到登錄頁面
     store.commit(types.LOGOUT);
     router.replace({
      path: 'login',
      query: {redirect: router.currentRoute.fullPath}
     })
   }
  }
  return Promise.reject(error.response.data) // 返回接口返回的錯誤信息
});

4、將token存儲在本地中

可以使用cookies/local/sessionStograge

三者的區(qū)別:

• sessionStorage 不能跨頁面共享的，關(guān)閉窗口即被清除，

• localStorage 可以同域共享，并且是持久化存儲的

• 在 local / session storage 的 tokens，就不能從不同的域名中讀取,甚至是子域名也不行.

• 解決辦法使用Cookie.demo: 假設(shè)當用戶通過 app.yourdomain.com 上面的驗證時你生成一個 token 并且作為一個 cookie 保存到 .yourdomain.com,然后，在 youromdain.com 中你可以檢查這個 cookie 是不是已經(jīng)存在了，并且如果存在的話就轉(zhuǎn)到 app.youromdain.com去。這個 token 將會對程序的子域名以及之后通常的流程都有效（直到這個 token 超過有效期）只是利用cookie的特性進行存儲而非驗證.

關(guān)于XSS和XSRF的防范:

• XSS 攻擊的原理是，攻擊者插入一段可執(zhí)行的 JavaScripts 腳本，該腳本會讀出用戶瀏覽器的 cookies 并將它傳輸給攻擊者，攻擊者得到用戶的 Cookies 后，即可冒充用戶。

• 防范 XSS ，在寫入 cookies 時，將 HttpOnly 設(shè)置為 true，客戶端 JavaScripts 就無法讀取該 cookies 的值，就可以有效防范 XSS 攻擊。

• CSRF是一種劫持受信任用戶向服務(wù)器發(fā)送非預(yù)期請求的攻擊方式。

• 防范 CSRF: 因為 Tokens 也是儲存在本地的 session storage 或者是客戶端的 cookies 中，也是會受到 XSS 攻擊。所以在使用 tokens 的時候，必須要考慮過期機制，不然攻擊者就可以永久持有受害用戶帳號。

相關(guān)文章: XSS 和 CSRF簡述及預(yù)防措施

 //login.vue
 methods: {
  login(){
   if (this.token) {
    //存儲在本地的localStograge中
    this.$store.commit(types.LOGIN, this.token)
    //跳轉(zhuǎn)至其他頁面
    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';

感謝各位的閱讀！關(guān)于“vue項目中如何使用token的身份驗證”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！