首頁  >  文章  >  web前端  >  vue中token用法是什麼

vue中token用法是什麼

藏色散人
藏色散人原創
2023-01-29 10:31:332802瀏覽

vue中token是在服務端產生的一串字串,以作客戶端進行請求的一個令牌;其使用方法如:1、封裝操作localstorage本地儲存的方法;2、在封裝好storage後,將其掛載到全域元件中;3、在「request.js」裡放入「token」;4、在router下的「index.vue」裡設定路由守衛即可。

vue中token用法是什麼

本教學操作環境:Windows10系統、vue3版、DELL G3電腦

vue中token用法是什麼? Vue中如何使用token












# #1.了解(session,cookie)token

Token的引入:Token是在客戶端頻繁向服務端請求數據,服務端頻繁的去數據庫查詢用戶名和密碼並進行對比,判斷用戶名和密碼正確與否,並作出相應提示,在這樣的背景下,Token便應運而生。

token 是在服務端產生的一串字串,以作客戶端進行請求的一個令牌。如果前端使用使用者名稱/密碼向服務端請求認證,服務端認證成功,那麼在服務端會回傳 Token 給前端。前端可以在每次請求的時候帶上 Token 證明自己的合法地位。如果這個 Token 在服務端持久化(例如存入資料庫),那它就是一個永久的身份令牌(除非設定了有效期限)。

2.token 優點
Token 完全由應用程式管理,所以它可以避免同源策略 Token 可以避免CSRF 攻擊
Token 可以是無狀態的,可以在多個服務間共享

減輕伺服器的壓力,減少頻繁的查詢資料庫,使伺服器更加健壯。

1、第一次登入的時候,前端調後端的登陸接口,發送用戶名和密碼

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

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

4、前端每次跳轉路由,就

判斷localStroage 中有無token ,沒有就跳到登入頁面,有則跳到對應路由頁面
5、每次調後端接口,都要在請求頭中加上token######6、後端判斷請求頭中有無token,有token,就拿到token並驗證token,驗證成功就返回數據,驗證失敗(例如:token過期)就返回401,請求頭中沒有token也回傳401######7、如果前端拿到狀態碼為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) !== &#39;undefined&#39;)
  },
  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] = {
        &#39;key&#39;: getKey,        &#39;val&#39;: 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 &#39;axios&#39;import storage from &#39;@/storage&#39;import router from &#39;@/router&#39;// create an axios instance
const service = axios.create({
  baseURL: &#39;/api&#39;, // 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn