Quelle est l'utilisation du jeton dans vue

Token in vue est une chaîne de chaînes générées côté serveur, utilisée comme jeton pour les requêtes des clients ; ses méthodes d'utilisation sont les suivantes : 1. Encapsuler la méthode d'exploitation du stockage local 2. Après avoir encapsulé le stockage, montez-le ; dans le composant global ; 3. Mettez "token" dans "request.js" 4. Définissez les gardes de routage dans "index.vue" sous le routeur.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version vue3, ordinateur DELL G3

A quoi sert le token dans vue ? Comment utiliser le jeton dans Vue

1. Comprendre l'utilisation
1 Comprendre le jeton (session, cookie)
Introduction du jeton : le jeton est la demande fréquente de données du client auprès du serveur. Le serveur accède fréquemment à la base de données pour interroger le nom d'utilisateur et le mot de passe et les compare pour déterminer si le nom d'utilisateur et le mot de passe sont corrects et donner les invites correspondantes. Dans ce contexte, Token a vu le jour.
le token est une chaîne de caractères générée côté serveur, utilisée comme token pour les requêtes des clients. Si le frontal utilise le nom d'utilisateur/mot de passe pour demander l'authentification au serveur et que l'authentification du serveur réussit, le serveur renverra un jeton au front-end. Le front-end peut apporter un Token à chaque demande pour prouver son statut juridique. Si ce jeton est conservé côté serveur (par exemple stocké dans une base de données), il s'agit d'un jeton d'identité permanent (sauf si une période de validité est définie).

2.token Avantages
Le jeton est entièrement géré par l'application, il peut donc éviter la politique de même origine
Le jeton peut éviter les attaques CSRF
Le jeton peut être apatride et peut être partagé entre plusieurs services
Réduire la pression sur le serveur, réduisez les requêtes fréquentes de base de données et rendez le serveur plus robuste.
1. Lors de la première connexion, le front-end ajuste l'interface de connexion du back-end et envoie le nom d'utilisateur et le mot de passe

2. Le back-end reçoit la demande et vérifie le nom d'utilisateur et le mot de passe en cas de vérification. réussit, un jeton est renvoyé au front-end

3. Le front-end récupère le jeton, le stocke dans localStorage et vuex, et passe à la page de routage前端拿到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. le front-end saute vers l'itinéraire, il juge s'il y a un jeton dans localStroage, sinon, passez à la page de connexion, si oui, passez à la page de routage correspondante

5. l'interface backend, vous devez ajouter un jeton à l'en-tête de la demande

6. Le backend détermine s'il y a un jeton dans l'en-tête de la demande, récupérez le jeton et vérifiez le jeton. les données seront renvoyées. Si la vérification échoue (par exemple, le jeton expire), 401 sera renvoyé. S'il n'y a pas de jeton dans l'en-tête de la demande, 401 sera également renvoyé 7. Si le front-end obtient le code d'état. 401, Effacez simplement les informations du jeton et accédez à la page de connexion

🎜2 Utilisation réelle🎜🎜1.Méthode d'encapsulation d'un cache local🎜 Créez un nouveau dossier de stockage. sous src , créez un nouveau index.vue🎜 dans le dossier et le code est le suivant : 🎜

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 Après avoir encapsulé le stockage, montez-le dans le composant global🎜 Ouvrez main.js sous src. 🎜 et ajoutez une ligne de code ：🎜

meta: {
          requireAuth: true
        }

🎜3. Mettez le jeton dans request.js🎜 Pour savoir ce qu'est la requête, vous pouvez vous référer à un autre document : "Comment Vue appelle avec succès une interface de données dynamique + résout les problèmes inter-domaines" ：Cliquez sur le lien de ce document pour sauter🎜🎜 La deuxième méthode décrit spécifiquement request.js🎜🎜Avant chaque itinéraire de saut , déterminez le localStroage (ou vuex) S'il contient un token, ou s'il a expiré (peut être écrit dans l'intercepteur de requête encapsulant Axios ou le garde de routage du routeur) 🎜 Le code request.js est le suivant 🎜rrreee 🎜4. Sous routage, routeur Définissez les gardes de routage dans index.vue🎜 Le code d'index complet est le suivant : 🎜rrreee🎜Quelle page a besoin de gardes de routage. Ajoutez-lui simplement des paramètres 🎜rrreee recommande d'apprendre : "🎜tutoriel vidéo vue🎜" 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!