站長資訊網(wǎng)
vue中token是在服務(wù)端產(chǎn)生的一串字符串，以作客戶端進(jìn)行請(qǐng)求的一個(gè)令牌；其使用方法如：1、封裝操作localstorage本地存儲(chǔ)的方法；2、在封裝好storage后，將其掛載到全局組件中；3、在“request.js”里放入“token”；4、在router下的“index.vue”里設(shè)置路由守衛(wèi)即可。
本教程操作環(huán)境：Windows10系統(tǒng)、vue3版、DELL G3電腦
vue中token用法是什么？Vue中如何使用token
一.了解用法
1.了解（session，cookie）token
Token的引入：Token是在客戶端頻繁向服務(wù)端請(qǐng)求數(shù)據(jù)，服務(wù)端頻繁的去數(shù)據(jù)庫查詢用戶名和密碼并進(jìn)行對(duì)比，判斷用戶名和密碼正確與否，并作出相應(yīng)提示，在這樣的背景下，Token便應(yīng)運(yùn)而生。
token 是在服務(wù)端產(chǎn)生的一串字符串，以作客戶端進(jìn)行請(qǐng)求的一個(gè)令牌。如果前端使用用戶名/密碼向服務(wù)端請(qǐng)求認(rèn)證，服務(wù)端認(rèn)證成功，那么在服務(wù)端會(huì)返回 Token 給前端。前端可以在每次請(qǐng)求的時(shí)候帶上 Token 證明自己的合法地位。如果這個(gè) Token 在服務(wù)端持久化（比如存入數(shù)據(jù)庫），那它就是一個(gè)永久的身份令牌（除非設(shè)置了有效期）。
2.token 優(yōu)點(diǎn)
Token 完全由應(yīng)用管理，所以它可以避開同源策略
Token 可以避免 CSRF 攻擊
Token 可以是無狀態(tài)的，可以在多個(gè)服務(wù)間共享
減輕服務(wù)器的壓力，減少頻繁的查詢數(shù)據(jù)庫，使服務(wù)器更加健壯。
1、第一次登錄的時(shí)候，前端調(diào)后端的登陸接口，發(fā)送用戶名和密碼
2、后端收到請(qǐng)求，驗(yàn)證用戶名和密碼，驗(yàn)證成功，就給前端返回一個(gè)token
3、前端拿到token，將token存儲(chǔ)到localStorage和vuex中，并跳轉(zhuǎn)路由頁面
4、前端每次跳轉(zhuǎn)路由，就判斷 localStroage 中有無 token ，沒有就跳轉(zhuǎn)到登錄頁面，有則跳轉(zhuǎn)到對(duì)應(yīng)路由頁面
5、每次調(diào)后端接口，都要在請(qǐng)求頭中加token
6、后端判斷請(qǐng)求頭中有無token，有token，就拿到token并驗(yàn)證token，驗(yàn)證成功就返回?cái)?shù)據(jù)，驗(yàn)證失?。ɡ纾簍oken過期）就返回401，請(qǐng)求頭中沒有token也返回401
7、如果前端拿到狀態(tài)碼為401，就清除token信息并跳轉(zhuǎn)到登錄頁面
二.實(shí)際使用1.封裝一個(gè)本地緩存的方法
在src下新建一個(gè)storage文件夾，文件夾里新建index.vue
代碼如下：
// 封裝操作localstorage本地存儲(chǔ)的方法 模塊化 var storage = { set(key, value) { localStorage.setItem(key, JSON.stringify(value)) }, get(key) { return localStorage.getItem(key) != 'undefined' ? JSON.parse(localStorage.getItem(key)) : undefined }, getForIndex(index) { return localStorage.key(index) }, getKeys() { let items = this.getAll() let keys = [] for (let index = 0; index < items.length; index++) { keys.push(items[index].key) } return keys }, getLength() { return localStorage.length }, getSupport() { return (typeof (Storage) !== 'undefined') }, remove(key) { localStorage.removeItem(key) }, removeAll() { localStorage.clear() }, getAll() { let len = localStorage.length // 獲取長度 let arr = new Array(len) // 定義數(shù)據(jù)集 for (var i = 0; i < len; i++) { // 獲取key 索引從0開始 var getKey = localStorage.key(i) // 獲取key對(duì)應(yīng)的值 var getVal = localStorage.getItem(getKey) // 放進(jìn)數(shù)組 arr[i] = { 'key': getKey, 'val': getVal } } return arr }}export default storage
2.封裝好storage后，把他掛載到全局組件中
打開src下的main.js
加上一句代碼：
Vue.prototype.$storage = storage;
3.在request.js里放入token
至于request是什么，具體可以參考另一篇文檔：“Vue如何成功調(diào)用一個(gè)動(dòng)態(tài)數(shù)據(jù)接口+解決跨域問題”：該文檔鏈接點(diǎn)擊跳轉(zhuǎn)
其中的方法二具體描述了request.js
每次跳轉(zhuǎn)路由前，判斷 localStroage（或vuex） 中有無 token，或者是否過期（可以寫在封裝Axios的請(qǐng)求攔截器中或者router的路由守衛(wèi)中）
request.js代碼如下
import axios from 'axios'import storage from '@/storage'import router from '@/router'// create an axios instance const service = axios.create({ baseURL: '/api', // url = base url + request url timeout: 5000 // request timeout})// 添加請(qǐng)求攔截器，若token存在則在請(qǐng)求頭中加token，不存在也繼續(xù)請(qǐng)求 service.interceptors.request.use( config => { // 每次發(fā)送請(qǐng)求之前檢測都vuex存有token,那么都要放在請(qǐng)求頭發(fā)送給服務(wù)器,沒有則不帶token // Authorization是必須的 let tokenInfo = storage.get('TOKEN') const token = tokenInfo ? tokenInfo.accessToken : null const tokenType = token ? tokenInfo.tokenType.substring(0, 1).toUpperCase() + tokenInfo.tokenType.substring(1) + ' ' : null if (token && tokenType) { config.headers.Authorization = tokenType + token } return config }, error => { console.log('在request攔截器檢查到錯(cuò)誤：', error.response) return Promise.reject(error) })// respone攔截器 service.interceptors.response.use( response => { return response }, error => { // 在status不正確的情況下，判別status狀態(tài)碼給出對(duì)應(yīng)響應(yīng) if (error.response) { console.log('在respone攔截器檢查到錯(cuò)誤：') switch (error.response.status) { case 204: error.response.data.error = '204:No Content（沒有內(nèi)容）' break case 401: // 可能是token過期，清除它 storage.remove('tokenInfo') location.reload() // 刷新頁面，觸發(fā)路由守衛(wèi) error.response.data.error = '401:Unauthorized（未經(jīng)授權(quán)）' break case 403: error.response.data.error = '403:Forbidden（被禁止的）' break case 500: error.response.data.error = '500:服務(wù)器內(nèi)部錯(cuò)誤' break default: return error } return Promise.reject(error.response.data.error) } return Promise.reject(error) })export default service
4.在路由，router下的index.vue里設(shè)置路由守衛(wèi)
整個(gè)index代碼如下：
import Vue from 'vue'import Router from 'vue-router'import Login from '@/views/login';import Main from '@/main/index';import tip1 from '@/views/tip1';import tip2 from '@/views/tip2';import tip3 from '@/views/tip3';import storage from '@/storage'Vue.use(Router)const routes = [{ path: '/', name: 'Login', // redirect: '/login', component: Login, }, { path: "/login", component: Login, }, { path: '/Main', component: Main, children: [{ path: '/', name: 'Tip1', component: tip1 }, { path: '/tip1', name: 'Tip1', component: tip1 }, { path: '/tip2', name: 'Tip2', component: tip2, meta: { requireAuth: true } }, { path: '/tip3', name: 'Tip3', component: tip3 }, ] }]const router = new Router({ routes})// 設(shè)置路由守衛(wèi)，在進(jìn)頁面之前，判斷有token，才進(jìn)入頁面，否則返回登錄頁面 router.beforeEach((to, from, next) => { // 默認(rèn)requiresAuth為false才不需要登錄，其他都要 // to.matched.some(r => r.meta.requireAuth) or to.meta.requiresAuth if (to.matched.some(r => r.meta.requireAuth) !== false) { let tokenInfo = storage.get('TOKEN') if (tokenInfo) { console.log("有token") next(); } else { storage.remove('TOKEN') next({ path: "/login", query: { redirect: to.fullPath } // 將剛剛要去的路由path（卻無權(quán)限）作為參數(shù)，方便登錄成功后直接跳轉(zhuǎn)到該路由 }); } } else { next(); //如果無需token,那么隨它去吧 }});//暴露router實(shí)例export default router // 1.將調(diào)用登錄接口成功以后，把后端傳過來的token放入本地緩存 // 2.路由跳轉(zhuǎn)之前執(zhí)行路由守衛(wèi)，實(shí)例化一個(gè)Router對(duì)象，使用該對(duì)象內(nèi)置方法beforeEach，在路由跳轉(zhuǎn)前判斷該頁面是否設(shè)置了token，獲取token // 如果有token，next()繼續(xù)執(zhí)行路由跳轉(zhuǎn) // 如果沒有token，跳轉(zhuǎn)去登錄界面
哪個(gè)頁面需要路由守衛(wèi)。就給他加上參數(shù)
meta: { requireAuth: true }
推薦學(xué)習(xí)：《vue視頻教程》
