vue3でCookieを使用する方法

はじめに

Cookieは、ユーザーのアカウントとパスワードを保存するために最も一般的に使用されます。これにより、ユーザーはログインするたびに再入力する必要がなくなります。

1.インストールvue の cookie の数

ターミナルでコマンド npm install vue-cookies --save を入力して Cookie をインストールします。インストール後、main.js ファイルに次のコードを記述します。

import { createApp } from 'vue'
import VueCookies from 'vue-cookies'
 
const app = createApp(App)
 
app.config.globalProperties.$cookies = VueCookies

プロジェクトでの Cookie の使用

2. ログイン プロセス中に Cookie を設定

ユーザーはパスワードを変更する可能性があるため、ビジネスにおける私の一般的なアプローチは、ログイン インターフェイスが正しく返されるまで待つことです。 （判定が正しければログイン可能） まずCookieがあるかどうかを判断し、存在する場合は削除し、新しいCookieを作成する コードは次のとおりです

if (ret.code === 200) {
  // 删除之前的cookies
  if($cookies.isKey("xxxxx") ){
     $cookies.remove("xxxxx")
  }
}

その後、再度保存しますログイン情報を Cookie に保存します。コードは次のとおりです。

// 设置cookies保存的内容
const xxxxx = {
  username: '',
  password: '',
  // 以下还有很多信息
}

最後のステップは、Cookie を再保存することです。コードは次のとおりです。

// 设置cookies的日期为一个月
$cookies.config("1m")
// 设置cookies
$cookies.set("xxxxx",xxxxx); // 前面的为设置cookies的名字，后面为内容

よくある質問を突然思い出しました。インタビューで、Cookie を無効に設定する方法について質問しましたが、その答えは、Cookie の有効期限を期限内に設定することです。考えたことがあるかどうかはわかりません。

3. 以前に保存した Cookie を必要な場所で取得します

コードも非常にシンプルです

import { getCurrentInstance } from 'vue'
 
// 创建可以访问内部组件实例的实例
const internalInstance = getCurrentInstance()
const internalData = internalInstance.appContext.config.globalProperties
const xxxxx = internalData.$cookies.get('xxxxx') // 后面的为之前设置的cookies的名字

この方法で、必要な場所で Cookie の内容を取得できます。 。

以上がvue3でCookieを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。