vue中token是在服務端產生的一串字串,以作客戶端進行請求的一個令牌;其使用方法如:1、封裝操作localstorage本地儲存的方法;2、在封裝好storage後,將其掛載到全域元件中;3、在「request.js」裡放入「token」;4、在router下的「index.vue」裡設定路由守衛即可。
本教學操作環境:Windows10系統、vue3版、DELL G3電腦
vue中token用法是什麼? Vue中如何使用token
# #1.了解(session,cookie)token
Token的引入:Token是在客戶端頻繁向服務端請求數據,服務端頻繁的去數據庫查詢用戶名和密碼並進行對比,判斷用戶名和密碼正確與否,並作出相應提示,在這樣的背景下,Token便應運而生。
2.token 優點
Token 完全由應用程式管理,所以它可以避免同源策略 Token 可以避免CSRF 攻擊
Token 可以是無狀態的,可以在多個服務間共享
1、第一次登入的時候,前端調後端的登陸接口,發送用戶名和密碼
3、
前端拿到token,將token儲存到localStorage和vuex中,並跳轉路由頁面
4、前端每次跳轉路由,就
判斷localStroage 中有無token ,沒有就跳到登入頁面,有則跳到對應路由頁面// 封装操作localstorage本地存储的方法 模块化 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) // 定义数据集 for (var i = 0; i < len; i++) { // 获取key 索引从0开始 var getKey = localStorage.key(i) // 获取key对应的值 var getVal = localStorage.getItem(getKey) // 放进数组 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如何成功呼叫一個動態資料介面解決跨域問題」:## #此文件連結點擊跳轉###### 其中的方法二具體描述了request.js######每次跳轉路由前,判斷localStroage(或vuex) 中有無token,或是否過期(可以寫在封裝Axios的請求攔截器中或router的路由守衛)### 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})// 添加请求拦截器,若token存在则在请求头中加token,不存在也继续请求 service.interceptors.request.use( config => { // 每次发送请求之前检测都vuex存有token,那么都要放在请求头发送给服务器,没有则不带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拦截器检查到错误:', error.response) return Promise.reject(error) })// respone拦截器 service.interceptors.response.use( response => { return response }, error => { // 在status不正确的情况下,判别status状态码给出对应响应 if (error.response) { console.log('在respone拦截器检查到错误:') switch (error.response.status) { case 204: error.response.data.error = '204:No Content(没有内容)' break case 401: // 可能是token过期,清除它 storage.remove('tokenInfo') location.reload() // 刷新页面,触发路由守卫 error.response.data.error = '401:Unauthorized(未经授权)' break case 403: error.response.data.error = '403:Forbidden(被禁止的)' break case 500: error.response.data.error = '500:服务器内部错误' break default: return error } return Promise.reject(error.response.data.error) } return Promise.reject(error) })export default service######4.在路由,router下的index.vue裡設定路由守衛###### 整個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})// 设置路由守卫,在进页面之前,判断有token,才进入页面,否则返回登录页面 router.beforeEach((to, from, next) => { // 默认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(却无权限)作为参数,方便登录成功后直接跳转到该路由 }); } } else { next(); //如果无需token,那么随它去吧 }});//暴露router实例export default router // 1.将调用登录接口成功以后,把后端传过来的token放入本地缓存 // 2.路由跳转之前执行路由守卫,实例化一个Router对象,使用该对象内置方法beforeEach,在路由跳转前判断该页面是否设置了token,获取token // 如果有token,next()继续执行路由跳转 // 如果没有token,跳转去登录界面###哪個頁面需要路由守衛。就給他加上參數###
meta: { requireAuth: true }推薦學習:《###vue影片教學###》 ####
以上是vue中token用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!