這篇文章主要介紹了vue項目中使用token的身份驗證的簡單實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨着小編來一起學習學習吧
工作原理
- 前端頁面進行登錄操作, 將用戶名與密碼發給服務器;
- 服務器進行效驗, 通過後生成token, 包含信息有密鑰, uid, 過期時間, 一些隨機算法等 ,然後返回給前端
- 前端將token保存在本地中, 建議使用localstorage進行保存. 下次對服務器發送請求時, 帶上本地存儲的token
- 服務器端,進行對token的驗證, 通過的話, 進行相應的增刪改查操作, 並將數據返回給前端
- 爲通過則返回錯誤碼, 提示保錯信息, 然後跳轉到登錄頁.
具體步驟
所用技術: vuex + axios + localStorage + vue-router
1、在登錄路由添加自定義mate字段, 來記錄該頁面是否需要身份驗證
//router.js
{
path: "/index",
name: "index",
component: resolve => require(['./index.vue'], resolve),
meta: {
requiresAuth: true
}
}
2、設置路由攔截
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()
}
})
3、設置攔截器
這裏使用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) // 返回接口返回的錯誤信息
});
4、將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';
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。