ノート

1. ログインビジネスの技術的ポイント

http はステートレスです

Cookie を使用してクライアント側の状態を記録する

セッションを通じてサーバー側の状態を記録する

トークンを介して状態を維持する

知らせ：

フロントエンドインターフェースとバックエンドインターフェースの間にクロスドメインの問題がない場合、通常、Cookie とセッションを使用してログインステータスを記録します。

クロスドメインの問題が発生した場合、通常はトークンを使用してログイン状態を維持します。

2. トークン原理分析

トークンは、ユーザーのログイン成功を保証する唯一の ID トークンです。

ログインページユーザー名とパスワードを入力してログインします

サーバーが認証されると、ユーザーのトークン値が生成され、クライアントに返されます。
知らせ：

トークンはサーバーによって生成されます

異なるユーザーごとに対応するトークンの値は異なります

クライアントはトークンを保存します

クライアントからの後続のすべてのリクエストにはリクエストを送信するためのトークンが含まれるため、サーバーはさまざまなトークン値に従ってリクエストがどのユーザーに属するかを判断し、ユーザーごとに異なる結果を返すことができます。

サーバーはトークンが存在するかどうかを確認し、存在する場合はログインしていることを証明し、トークンに応じて対応するデータを返します。

ここに画像の説明を挿入

3. Git関連の知識

git がすでにインストールされている場合に公開キーを構成する

命令

現在のワークスペースがクリーンかどうかを確認します: git status

ブランチを作成します: git checkout -b "ブランチ名"

すべてのブランチを表示: git ブランチ (* は現在のブランチ)

作業ディレクトリのコンテンツをステージング領域に追加します: git add 。

一時ストレージ領域の内容をローカルウェアハウスに追加します: git commit -m "remarks"

他のブランチをマージします: git merge "マージするブランチ名"

Webpack 構成プロパティ - devServer

4. グローバルスタイル

静的ディレクトリassets/stylesをsrcディレクトリの下に追加します。

CSSファイルをstylesディレクトリに作成します。

main.jsにインポートする

// 导入全局样式表
import './assets/styles/reset.css'

// 导入字体图标
import './assets/fonts/iconfont.css'

5. ログイン後の操作

すべてのページはログインに成功した後にのみアクセスできるようにする必要がありますが、ログインが成功したかどうかをどのように判断すればよいでしょうか? トークンはログインに成功した後にサーバーによって発行されるため、現時点ではトークンを使用する必要があります。 .一意のトークン
次の 2 つの操作を実行する必要があります

クライアントの sessionStorage へのログインに成功した後、トークンを保存します。
1. プロジェクトにはログイン以外の API インターフェースがあり、ログイン後にアクセスする必要があります
2. トークンは現在の Web サイトが開いているときにのみ有効になるため、トークンを sessionStorage に保存します。

window.sessionStorage.setItem("token", res.data.token);

プログラムによるナビゲーションを通じてバックグラウンドのホームページにジャンプします。ルーティングアドレスは /home です。
```
// 先在路由表里进行如下配置
    {
      
      
      path: '/home',
      component: Home
    }

// 然后在Login组件里登录成功之后写编程式导航对象调用push方法
this.$router.push('/home')
```
6. exit関数の実装
- 原理：
- トークンベースの終了は比較的単純で、ローカルトークンを破棄するだけで済みます。
- この方法では、後続のリクエストではトークンが送信されないため、ページにアクセスするには、再度ログインして新しいトークンを生成する必要があります。
- コードは以下のように表示されます:
```
// 清空token
window.sessionStorage.clear()
// 跳转至登录页
this.$router.push('/login')
```

トークンに基づくログインおよびログアウトコンポーネント

ノート

1. ログインビジネスの技術的ポイント

2. トークン原理分析

3. Git関連の知識

4. グローバルスタイル

5. ログイン後の操作

6. exit関数の実装

おすすめ