vue中的token怎么使用

這篇文章主要介紹了vue中的token怎么使用的相關知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue中的token怎么使用文章都會有所收獲，下面我們一起來看看吧。

創(chuàng)新互聯(lián)是專業(yè)的蔡家坡網(wǎng)站建設公司，蔡家坡接單;提供網(wǎng)站設計、做網(wǎng)站,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行蔡家坡網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

vue中token是在服務端產(chǎn)生的一串字符串，以作客戶端進行請求的一個令牌；其使用方法如：1、封裝操作localstorage本地存儲的方法；2、在封裝好storage后，將其掛載到全局組件中；3、在“request.js”里放入“token”；4、在router下的“index.vue”里設置路由守衛(wèi)即可。

一.了解用法

1.了解（session，cookie）token
Token的引入：Token是在客戶端頻繁向服務端請求數(shù)據(jù)，服務端頻繁的去數(shù)據(jù)庫查詢用戶名和密碼并進行對比，判斷用戶名和密碼正確與否，并作出相應提示，在這樣的背景下，Token便應運而生。
token 是在服務端產(chǎn)生的一串字符串，以作客戶端進行請求的一個令牌。如果前端使用用戶名/密碼向服務端請求認證，服務端認證成功，那么在服務端會返回 Token 給前端。前端可以在每次請求的時候帶上 Token 證明自己的合法地位。如果這個 Token 在服務端持久化（比如存入數(shù)據(jù)庫），那它就是一個永久的身份令牌（除非設置了有效期）。

2.token 優(yōu)點
Token 完全由應用管理，所以它可以避開同源策略
Token 可以避免 CSRF 攻擊
Token 可以是無狀態(tài)的，可以在多個服務間共享
減輕服務器的壓力，減少頻繁的查詢數(shù)據(jù)庫，使服務器更加健壯。
1、第一次登錄的時候，前端調(diào)后端的登陸接口，發(fā)送用戶名和密碼

2、后端收到請求，驗證用戶名和密碼，驗證成功，就給前端返回一個token

3、前端拿到token，將token存儲到localStorage和vuex中，并跳轉路由頁面

4、前端每次跳轉路由，就判斷 localStroage 中有無 token ，沒有就跳轉到登錄頁面，有則跳轉到對應路由頁面

5、每次調(diào)后端接口，都要在請求頭中加token

6、后端判斷請求頭中有無token，有token，就拿到token并驗證token，驗證成功就返回數(shù)據(jù)，驗證失?。ɡ纾簍oken過期）就返回401，請求頭中沒有token也返回401

7、如果前端拿到狀態(tài)碼為401，就清除token信息并跳轉到登錄頁面

二.實際使用
1.封裝一個本地緩存的方法
在src下新建一個storage文件夾，文件夾里新建index.vue
代碼如下：

// 封裝操作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) // 定義數(shù)據(jù)集    for (var i = 0; i < len; i++) {
     // 獲取key 索引從0開始
     var getKey = localStorage.key(i)
     // 獲取key對應的值
     var getVal = localStorage.getItem(getKey)
     // 放進數(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)用一個動態(tài)數(shù)據(jù)接口+解決跨域問題”：該文檔鏈接點擊跳轉
其中的方法二具體描述了request.js

每次跳轉路由前，判斷 localStroage（或vuex）中有無 token，或者是否過期（可以寫在封裝Axios的請求攔截器中或者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})// 添加請求攔截器，若token存在則在請求頭中加token，不存在也繼續(xù)請求
service.interceptors.request.use(
 config => {
   // 每次發(fā)送請求之前檢測都vuex存有token,那么都要放在請求頭發(fā)送給服務器,沒有則不帶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狀態(tài)碼給出對應響應    if (error.response) {
     console.log('在respone攔截器檢查到錯誤：')
     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)授權）'
         break
       case 403:
         error.response.data.error = '403:Forbidden（被禁止的）'
         break
       case 500:
         error.response.data.error = '500:服務器內(nèi)部錯誤'
         break
       default:          return error      }
     return Promise.reject(error.response.data.error)
   }

   return Promise.reject(error)
 })export default service

4.在路由，router下的index.vue里設置路由守衛(wèi)
整個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})// 設置路由守衛(wèi)，在進頁面之前，判斷有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（卻無權限）作為參數(shù)，方便登錄成功后直接跳轉到該路由      });
   }

 } else {
   next(); //如果無需token,那么隨它去吧  }});//暴露router實例export default router
// 1.將調(diào)用登錄接口成功以后，把后端傳過來的token放入本地緩存
// 2.路由跳轉之前執(zhí)行路由守衛(wèi)，實例化一個Router對象，使用該對象內(nèi)置方法beforeEach，在路由跳轉前判斷該頁面是否設置了token，獲取token
// 如果有token，next()繼續(xù)執(zhí)行路由跳轉
// 如果沒有token，跳轉去登錄界面

哪個頁面需要路由守衛(wèi)。就給他加上參數(shù)

meta: {
         requireAuth: true
       }

關于“vue中的token怎么使用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“vue中的token怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：vue中的token怎么使用
鏈接地址：http://bm7419.com/article48/phdcep.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站內(nèi)鏈、網(wǎng)站制作、網(wǎng)站設計公司、品牌網(wǎng)站建設、App開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容