vueでのトークンの使用法は何ですか

vue のトークンはサーバー側で生成される文字列で、クライアントリクエストのトークンとして利用されますが、その利用方法は以下の通りです: 1. ローカルストレージの操作方法をカプセル化する 2. in vueカプセル化 ストレージの準備ができたら、グローバル コンポーネントにマウントします; 3. "request.js" に "token" を置きます; 4. ルーターの下の "index.vue" にルーティング ガードを設定します。

このチュートリアルの動作環境: Windows 10 システム、vue3 バージョン、DELL G3 コンピューター

トークンの使用方法についてビューで？ Vue でのトークンの使用方法

##1. 使用方法を理解する
# #1. (セッション、Cookie) トークンを理解する トークンの概要: トークンとは、クライアントがサーバーに頻繁にデータを要求し、サーバーが頻繁にデータベースにアクセスしてユーザー名とパスワードを照会し、それらを比較するものです。ユーザー名とパスワードを決定し、正しいかどうかを確認し、対応するプロンプトを表示するこの文脈で、トークンが誕生しました。
トークンは、クライアント要求のトークンとしてサーバー側で生成される文字列です。フロントエンドがユーザー名/パスワードを使用してサーバーに認証を要求し、サーバー認証が成功した場合、サーバーはフロントエンドにトークンを返します。フロントエンドは、その法的ステータスを証明するために、リクエストごとにトークンを持ち込むことができます。このトークンがサーバー側で永続化されている場合 (データベースに保存されている場合など)、永続的な ID トークンになります (有効期間が設定されている場合を除く)。

2.トークンの利点 トークンはアプリケーションによって完全に管理されるため、同一生成元ポリシーを回避できます
トークンは CSRF 攻撃を回避できます
トークンはステートレスにできます、複数のサービス間で共有できます
サーバーへの負荷を軽減し、頻繁なデータベース クエリを減らし、サーバーをより堅牢にします。
1. 初めてログインするとき、フロントエンドはバックエンドのログインインターフェイスを調整し、ユーザー名とパスワードを送信します。

2. バックエンドはリクエストを受信し、ユーザー名を確認します。検証が成功すると、トークンが返されます

#3.

フロントエンドはトークンを取得し、トークンを localStorage と vuex に保存し、ルーティング ページにジャンプします

4. フロントエンドはルーティングページにジャンプするたびに

localStroage にトークンがあるかどうかを判断し、ない場合はログインページにジャンプし、あればログインページにジャンプします。対応するルーティング ページにジャンプします。

5. バックエンド インターフェイスを調整するたびに、リクエスト ヘッダーに含める必要があります。トークンを追加します。#6. バックエンドは、トークンが存在するかどうかを判断します。リクエスト ヘッダー。トークンがある場合は、トークンを取得し、トークンを検証します。検証が成功すると、データが返されます。検証が失敗した場合 (例: トークンの有効期限が切れた場合)、401 が返されます。リクエスト ヘッダーにトークンがない場合、401

が返されます 7. フロントエンドがステータス コード 401 を取得した場合、トークン情報をクリアしてログイン ページ##にジャンプします

#2. 実際の使用方法

1

.ローカルキャッシュのカプセル化方法
src配下に新規保存フォルダーを作成し、 <pre class="brush:php;toolbar:false">// 封装操作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 </pre>2. ストレージをカプセル化した後、グローバル コンポーネントにマウントします。
メインを開きます。 js を src
の下に配置し、コードを追加します:

Vue.prototype.$storage = storage;

3. request.js
にトークンを置きます。リクエストとは何かについては、別のドキュメントを参照してください。 「クロスドメインの問題を解決するために、Vue が動的データ インターフェイスを正常に呼び出す方法」:
ジャンプするには、このドキュメントのリンクをクリックしてください

メソッド 2 では、具体的に request.js各ジャンプ ルートの前に説明します。 、localStroage (または vuex) にトークンがあるかどうか、または有効期限が切れているかどうかを判断します (Axios をカプセル化するリクエスト インターセプターまたはルーターのルーティング ガードに書き込むことができます)
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. routing and router Guardの下のindex.vueでルーティングを設定します

インデックスコード全体は次のとおりです:

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でのトークンの使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。