這篇文章給大家分享的是有關(guān)vue項(xiàng)目中如何使用token的身份驗(yàn)證的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
工作原理
前端頁(yè)面進(jìn)行登錄操作, 將用戶(hù)名與密碼發(fā)給服務(wù)器;
服務(wù)器進(jìn)行效驗(yàn), 通過(guò)后生成token, 包含信息有密鑰, uid, 過(guò)期時(shí)間, 一些隨機(jī)算法等 ,然后返回給前端
前端將token保存在本地中, 建議使用localstorage進(jìn)行保存. 下次對(duì)服務(wù)器發(fā)送請(qǐng)求時(shí), 帶上本地存儲(chǔ)的token
服務(wù)器端,進(jìn)行對(duì)token的驗(yàn)證, 通過(guò)的話, 進(jìn)行相應(yīng)的增刪改查操作, 并將數(shù)據(jù)返回給前端
為通過(guò)則返回錯(cuò)誤碼, 提示保錯(cuò)信息, 然后跳轉(zhuǎn)到登錄頁(yè).
具體步驟
所用技術(shù): vuex + axios + localStorage + vue-router
1、在登錄路由添加自定義mate字段, 來(lái)記錄該頁(yè)面是否需要身份驗(yàn)證
重慶分公司
重慶分公司
//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對(duì)象的檢查元字段
//arr.some() 表示判斷該數(shù)組是否有元素符合相應(yīng)的條件, 返回布爾值
if (to.matched.some(record => record.meta.requiresAuth)) {
//判斷當(dāng)前是否有登錄的權(quán)限
if (!auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // 確保一定要調(diào)用 next()
}
})3、設(shè)置攔截器
這里使用axios的攔截器，對(duì)所有請(qǐng)求進(jìn)行攔截判斷。
在后面的所有請(qǐng)求中都將攜帶token進(jìn)行. 我們利用axios中的攔截器, 通過(guò)配置http response inteceptor, 當(dāng)后端接口返回401 (未授權(quán)), 讓用戶(hù)重新執(zhí)行登錄操作。
// http request 攔截器
axios.interceptors.request.use(
config => {
if (store.state.token) { // 判斷是否存在token，如果存在的話，則每個(gè)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)到登錄頁(yè)面
store.commit(types.LOGOUT);
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}
})
}
}
return Promise.reject(error.response.data) // 返回接口返回的錯(cuò)誤信息
});4、將token存儲(chǔ)在本地中
可以使用cookies/local/sessionStograge
三者的區(qū)別:
sessionStorage 不能跨頁(yè)面共享的，關(guān)閉窗口即被清除，
localStorage 可以同域共享，并且是持久化存儲(chǔ)的
在 local / session storage 的 tokens，就不能從不同的域名中讀取,甚至是子域名也不行.
解決辦法使用Cookie.demo: 假設(shè)當(dāng)用戶(hù)通過(guò) app.yourdomain.com 上面的驗(yàn)證時(shí)你生成一個(gè) token 并且作為一個(gè) cookie 保存到 .yourdomain.com,然后，在 youromdain.com 中你可以檢查這個(gè) cookie 是不是已經(jīng)存在了，并且如果存在的話就轉(zhuǎn)到 app.youromdain.com去。這個(gè) token 將會(huì)對(duì)程序的子域名以及之后通常的流程都有效（直到這個(gè) token 超過(guò)有效期）只是利用cookie的特性進(jìn)行存儲(chǔ)而非驗(yàn)證.
關(guān)于XSS和XSRF的防范:
XSS 攻擊的原理是，攻擊者插入一段可執(zhí)行的 JavaScripts 腳本，該腳本會(huì)讀出用戶(hù)瀏覽器的 cookies 并將它傳輸給攻擊者，攻擊者得到用戶(hù)的 Cookies 后，即可冒充用戶(hù)。
防范 XSS ，在寫(xiě)入 cookies 時(shí)，將 HttpOnly 設(shè)置為 true，客戶(hù)端 JavaScripts 就無(wú)法讀取該 cookies 的值，就可以有效防范 XSS 攻擊。
CSRF是一種劫持受信任用戶(hù)向服務(wù)器發(fā)送非預(yù)期請(qǐng)求的攻擊方式。
防范 CSRF: 因?yàn)?Tokens 也是儲(chǔ)存在本地的 session storage 或者是客戶(hù)端的 cookies 中，也是會(huì)受到 XSS 攻擊。所以在使用 tokens 的時(shí)候，必須要考慮過(guò)期機(jī)制，不然攻擊者就可以永久持有受害用戶(hù)帳號(hào)。
相關(guān)文章: XSS 和 CSRF簡(jiǎn)述及預(yù)防措施
//login.vue
methods: {
login(){
if (this.token) {
//存儲(chǔ)在本地的localStograge中
this.$store.commit(types.LOGIN, this.token)
//跳轉(zhuǎn)至其他頁(yè)面
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項(xiàng)目中如何使用token的身份驗(yàn)證”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
