Was ist die Verwendung von Token in Vue?

Token in Vue ist eine auf der Serverseite generierte Zeichenfolge, die als Token für Clientanforderungen verwendet wird. Die Verwendungsmethoden lauten wie folgt: 1. Kapseln Sie die Methode zum Betrieb des lokalen Speichers. 2. Mounten Sie ihn nach der Kapselung in die globale Komponente einfügen; 3. „Token“ in „request.js“ einfügen. 4. Routing-Guards in „index.vue“ unter „Router“ festlegen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue3-Version, DELL G3-Computer

Was ist die Verwendung von Token in Vue? So verwenden Sie Token in Vue

1. Verstehen Sie die Verwendung
1. Verstehen Sie (Sitzungs-, Cookie-)Token
Einführung von Token: Token ist die häufige Anfrage des Clients nach Daten vom Server Der Server fragt häufig den Benutzernamen und das Passwort ab und vergleicht sie, um festzustellen, ob der Benutzername und das Passwort korrekt sind, und gibt entsprechende Eingabeaufforderungen aus.
Token ist eine serverseitig generierte Zeichenfolge, die als Token für Clientanfragen verwendet wird. Wenn das Frontend den Benutzernamen/das Passwort verwendet, um die Authentifizierung vom Server anzufordern, und die Serverauthentifizierung erfolgreich ist, gibt der Server ein Token an das Frontend zurück. Das Frontend kann Token bei jeder Anfrage mitbringen, um seinen rechtlichen Status nachzuweisen. Wenn dieses Token auf der Serverseite dauerhaft vorhanden ist (z. B. in einer Datenbank gespeichert), handelt es sich um ein permanentes Identitätstoken (sofern kein Gültigkeitszeitraum festgelegt ist).

2.token Vorteile
Token wird vollständig von der Anwendung verwaltet, sodass die Same-Origin-Richtlinie vermieden werden kann
Token kann CSRF-Angriffe vermeiden
Token kann zustandslos sein und von mehreren Diensten gemeinsam genutzt werden
Reduzieren Sie den Druck auf die Server, Reduzieren Sie häufige Datenbankabfragen und machen Sie den Server robuster.
1. Beim ersten Login passt das Frontend die Login-Schnittstelle des Backends an und sendet den Benutzernamen und das Passwort

2. Das Backend empfängt die Anfrage und verifiziert den Benutzernamen und das Passwort ist erfolgreich, wird ein Token an das Frontend zurückgegeben

3. Das Frontend erhält das Token, speichert das Token in localStorage und vuex und springt zur Routing-Seite前端拿到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 '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里设置路由守卫
4 Das Front-End springt zur Route und beurteilt, ob in localStroage ein Token vorhanden ist. Wenn nicht, springen Sie zur Anmeldeseite. Wenn ja, springen Sie zur entsprechenden Routing-Seite

5 In der Backend-Schnittstelle müssen Sie ein Token zum Anforderungsheader hinzufügen.

6 Das Backend ermittelt, ob ein Token vorhanden ist, und überprüft das Token Wenn die Überprüfung fehlschlägt (z. B. wenn das Token abläuft), wird 401 zurückgegeben. Wenn im Anforderungsheader kein Token vorhanden ist, wird auch 401 zurückgegeben. Wenn das Frontend den Statuscode erhält 401, Löschen Sie einfach die Token-Informationen und springen Sie zur Anmeldeseite

🎜2. Tatsächliche Verwendung🎜🎜1.Methode zum Kapseln eines lokalen Caches🎜 Erstellen Sie einen neuen Speicherordner Erstellen Sie unter src eine neue index.vue🎜 im Ordner und der Code lautet wie folgt: 🎜

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，跳转去登录界面

🎜2 Nachdem Sie den Speicher gekapselt haben, mounten Sie ihn in die globale Komponente🎜 Öffnen Sie main.js unter src 🎜 und fügen Sie eine Codezeile hinzu: 🎜

meta: {
          requireAuth: true
        }

🎜3. Setzen Sie das Token in request.js🎜 Einzelheiten zu der Anforderung finden Sie in einem anderen Dokument: „Wie Vue erfolgreich dynamische Daten aufruft Schnittstelle + löst domänenübergreifende Probleme" ：Klicken Sie auf diesen Dokumentlink, um zu springen🎜🎜 Die zweite Methode beschreibt jeweils speziell request.js🎜🎜 Sprungroute, bestimmen Sie die lokaleStroage (oder vuex) Ob sich ein Token darin befindet oder ob es abgelaufen ist (kann in den Request-Interceptor geschrieben werden, der Axios oder den Routing-Guard des Routers kapselt) 🎜 Der request.js-Code lautet wie folgt 🎜rrreee🎜4. Unter Routing, Router Routing Guards in index.vue festlegen🎜 Der gesamte Indexcode lautet wie folgt: 🎜rrreee🎜Welche Seite benötigt Routing Guards? Fügen Sie ihm einfach Parameter hinzu 🎜rrreee empfiehlt das Lernen: „🎜vue Video-Tutorial🎜“ 🎜

Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von Token in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!