目次
1. トークンとは何ですか?
トークンはサーバーによって生成される文字列であり、ユーザーが初めてログインに成功すると、サーバーはトークンを生成してクライアントに返します。
ユーザーがサーバーからデータを再度リクエストするときは、ユーザー名とパスワードを使用して再度ログインすることなく、データをリクエストするためのトークンを持ち運ぶだけで済みます。目的: トークンを使用してデータを傍受すると、データベースリクエストの数が減り、サーバーの負荷が軽減されます
。
。
2. トークンの取得
ユーザーが初めてログインに成功すると、バックエンドはクライアントにトークンを返します。フロントエンドはトークンをローカルにキャッシュし、リクエストが行われるたびにヘッダーにトークンを含める必要があります。ローカル トークンとバックエンド データベース トークンが検証され、両者が一致していればリクエストは成功し、一致していなければリクエストは失敗します。
3. トークンの無効化処理
フロントエンドとバックエンドはトークンを介してやり取りするため、常に有効であるとセキュリティ上のリスクが発生するため、クライアント側でトークン時間を確認する必要があります。サーバーのトークンは通常、あまり長く設定されません。実際の状況によれば
、通常は 1 ~ 7 日で、トークンはありません。永続的です。永続トークンは一連の永続キーと同等であり、安全ではありません。
一般に、トークンの有効期限には 2 つのシナリオがあります。
① アクティブ ログアウト: ユーザーがログアウト ボタンをクリックした後にログアウトします
。 ② パッシブ ログアウト: トークンの有効期限が切れるか、誰かが「アカウントを呼び出す」ことによってログアウトします。
注意点
トークンをどのように終了するかに関係なく、ユーザーが終了するときに実行する必要がある操作は固定されています。
1. 現在のユーザーのキャッシュ データをクリアします。
2. 関連するアクセス許可の設定をクリアします
。 3. ログイン ページに戻ります。
1. 率先して撤退する
ユーザーが積極的にクリックしてuser.js を実装する関数を終了します。
// 获取退出登录
logout(context) {
context.commit("removeToken"); // 删除token
context.commit("reomveUserInfo"); // 删除用户信息
},
2. トークンの有効期限が切れる
①ロジック図
②計画
ユーザーがログインすると、現在のログイン時間を記録し
、トークンのエージング タイムを設定します
。インターフェイスが呼び出されたときに、現在の時刻に基づいてログイン時間を比較し、エージング タイムを超えているかどうかを確認します。超えていない場合は
、以降の動作は通常通り行われますが、それを超えた場合はログアウトしてください。
③コード実装
ユーザー.js
// 获取登录信息
async login(context, data) {
const result = await loginInfo(data);
context.commit("setToken", result);
setTimeStamp(); // 写入时间戳
},
auth.js
import Cookies from "js-cookie";
const timeKey = 'liqi6limi-timestamp-key' // 设置一个独一无二的key
// 获取时间戳
export function getTimeStamp() {
return Cookies.get(timeKey)
}
// 设置时间戳
export function setTimeStamp() {
Cookies.set(timeKey, Date.now())
}
// 设置超时时间
export const TimeOut = 3600;
// 是否超时
export function IsCheckTimeOut() {
var currentTime = Date.now(); // 当前时间戳
var timeStamp = getTimeStamp(); // 缓存时间戳
return (currentTime - timeStamp) / 1000 > TimeOut;
}
リクエスト.js
import store from "@/store";
import axios from "axios";
import {
getTimeStamp,IsCheckTimeOut } from "@/utils/auth";
import router from "@/router";
// 创建axios实例
const service = axios.create({
baseURL: "/api",
timeout: 5000,
});
// 请求拦截器
service.interceptors.request.use(
(config) => {
// 是否存在token
if (store.getters.token) {
if (IsCheckTimeOut()) {
store.dispatch("user/logout"); // 退出登录的action
router.push("/login"); // 跳转到登录页
return Promise.reject(new Error("token超时了")); // 抛出的错误,会在响应拦截器的错误捕捉中捕捉到
console.log("超时");
}
config.headers["Authorization"] = `Bearer ${
store.getters.token}`; // 如果token存在 注入token
}
return config; // 必须返回配置
},
(error) => {
return Promise.reject(error);
}
);
3. 番号で呼ばれる
①ロジック図
②計画
バックエンドがデータを返すとき、フロントエンドに通知するために特定のステータス コードを返します。
フロントエンドが特定のステータス コードを受信した場合、それは特定の状態に遭遇したことを意味します。この時点でログアウトします。
③コード実装
// 响应拦截器
service.interceptors.response.use(
(response) => {
// axios默认加了一层data
const {
success, message, data } = response.data;
// 要根据success的成功与否决定下面的操作
if (success) {
return data;
} else {
// 业务已经错误了
Message.error(message); // 提示错误消息
return Promise.reject(new Error(message));
}
},
(error) => {
// error 信息 里面 response的对象
if (
error.response &&
error.response.data &&
error.response.data.code === 10002
) {
// 当等于10002的时候 表示 后端告诉我token超时了
store.dispatch("user/logout"); // 登出action 删除token
router.push("/login");
} else {
Message.error(error.message); // 提示错误信息
}
return Promise.reject(error);
}
);