Apakah kegunaan token dalam vue

Token dalam Vue ialah rentetan rentetan yang dihasilkan pada bahagian pelayan, digunakan sebagai token untuk permintaan pelanggan adalah seperti berikut: 1. Merangkumkan kaedah mengendalikan storan tempatan; Selepas storan siap, pasangkannya ke dalam komponen global 3. Letakkan "token" dalam "request.js" 4. Tetapkan pengawal penghalaan dalam "index.vue" di bawah penghala.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi vue3, komputer DELL G3

Apakah penggunaan token dalam vue? Cara menggunakan token dalam Vue

1. Fahami penggunaan
1. Fahami (sesi, kuki) token
Pengenalan Token: Token ialah apabila pelanggan kerap meminta data daripada pelayan, dan pelayan kerap pergi ke pangkalan data untuk menanyakan nama pengguna dan kata laluan dan membandingkannya untuk menentukan nama pengguna dan kata laluan Betul atau tidak, dan memberikan gesaan yang sepadan Dalam konteks ini, Token wujud.
token ialah rentetan aksara yang dijana pada bahagian pelayan, digunakan sebagai token untuk permintaan pelanggan. Jika bahagian hadapan menggunakan nama pengguna/kata laluan untuk meminta pengesahan daripada pelayan, dan pengesahan pelayan berjaya, pelayan akan mengembalikan Token ke bahagian hadapan. Bahagian hadapan boleh membawa Token dengan setiap permintaan untuk membuktikan status undang-undangnya. Jika Token ini dikekalkan di bahagian pelayan (seperti disimpan dalam pangkalan data), ia adalah token identiti kekal (melainkan tempoh sah ditetapkan).

2. Kelebihan Token
Token diuruskan sepenuhnya oleh aplikasi, jadi ia boleh mengelakkan dasar asal yang sama
Token boleh mengelakkan serangan CSRF
Token boleh tanpa negara , boleh dikongsi antara pelbagai perkhidmatan
Kurangkan tekanan pada pelayan, kurangkan pertanyaan pangkalan data yang kerap dan jadikan pelayan lebih mantap.
1. Apabila log masuk buat kali pertama, bahagian hadapan melaraskan antara muka log masuk bahagian belakang dan menghantar nama pengguna dan kata laluan

2. Bahagian belakang menerima permintaan dan mengesahkan nama pengguna dan kata laluan jika pengesahan berjaya, ia akan mengembalikan token

3, 前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面

4 >. Jika tidak, ia akan melompat ke halaman log masuk Jika ada, ia akan melompat ke halaman penghalaan yang sepadan判断 localStroage 中有无 token

5. Setiap kali anda melaraskan antara muka bahagian belakang, anda mesti menambah token pada pengepala permintaan

6. Bahagian belakang menentukan sama ada terdapat token dalam tajuk permintaan Jika terdapat token, ia akan mendapat token dan mengesahkan token tersebut pengesahan gagal (contohnya, token tamat tempoh), 401 akan dikembalikan Jika tiada token dalam pengepala permintaan, 401 akan dikembalikan

7. Jika bahagian hadapan mendapat kod status 401, kosongkan maklumat token dan lompat ke halaman log masuk

2. Penggunaan sebenar
.1封装一个本地缓存的方法 Cipta folder storan di bawah src, dan buat index.vue baharu Kod adalah seperti berikut:

// 封装操作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

Buka main.js di bawah src2.封装好storage后，把他挂载到全局组件中 dan tambah kod:

Vue.prototype.$storage = storage;

Bagi butiran mengenai permintaan itu, anda boleh merujuk kepada dokumen lain: "Bagaimana Vue berjaya memanggil antara muka data dinamik + menyelesaikan masalah merentas domain": 3.在request.js里放入tokenKlik pada pautan dokumen ini untuk melompat
Kaedah kedua diterangkan dalam permintaan terperinci.js
Sebelum setiap lompatan laluan, tentukan sama ada terdapat token dalam localStroage (atau vuex), atau sama ada ia mempunyai tamat tempoh (boleh ditulis dalam pemintas permintaan yang merangkum Axios atau dalam pengawal penghalaan penghala)

Kod request.js adalah seperti berikut

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

Keseluruhan kod indeks adalah seperti berikut: 4.在路由，router下的index.vue里设置路由守卫

Halaman manakah yang memerlukan pengawalan laluan. Cuma tambahkan parameter kepadanya

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

Pembelajaran yang disyorkan: "

tutorial video vue

meta: {
          requireAuth: true
        }

"

Atas ialah kandungan terperinci Apakah kegunaan token dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!