1.ユーザーは初めてログインし、バックエンドログインインターフェイスを呼び出し、ユーザー名とパスワードを送信します
2.バックエンドはユーザー名とパスワードが正しいことを確認し、成功するとトークンを返します。
3.フロントエンドはトークンを取得し、トークンをlocalStorge（）とvuexに格納し、ホームページにジャンプします
4.フロントエンドがルートをジャンプするたびに、localStorgeにトークンがあるかどうかを判断し、ない場合は、ログインページにジャンプします
5.バックエンドを呼び出すたびに、リクエストヘッダーにトークンを追加する必要があります
6.バックエンドは、トークンがあるかどうかを判断します。トークンがある場合は、トークンを検証します。検証が成功した場合、データが返されます。検証が失敗した場合、トークンは期限切れになります。
7.フロントエンドの場合、401を取得し、トークンをクリアして、ログインページにジャンプします。
<テンプレート>
<div>
<input type = "text" v-model = "loginForm.username" placeholder = "用户名" />
<input type = "text" v-model = "loginForm.password" placeholder = "密码" />
<button @ click = "login">登录</ button>
</ div>
</テンプレート>
デフォルトのエクスポート{
データ（）{
返す{
loginForm：{
ユーザー名： ''、
パスワード： ''}
};
}、
メソッド：{
... mapMutations（['changeLogin']）、
ログインする （） {
let _this = this;
/////アカウントのパスワードが入力されているかどうかを判断します。入力されていない場合、アラートが出ます
if（this.loginForm.username === '' || this.loginForm.password === ''）{
警告（「アカウントまたはパスワードは空にできません」）;
} そうしないと {
this.axios（{
メソッド： 'post'、
url： '/ user / login'、
データ：_this.loginForm
}）。then（res => {
console.log（res.data）;
_this.userToken = 'Bearer' + res.data.data.body.token;
//ユーザートークンをvuexに保存します_this.changeLogin（{Authorization：_this.userToken}）;
_this。$ router.push（ '/ home'）;
警告（「ログイン成功」）;
}）。catch（error => {
警告（「アカウントまたはパスワードが間違っています」）;
console.log（error）;
}）;
}
}
}
};
「store vue」 からのstore import 文V下的index.jsのトークンインポートVueの追加。'vuex' からVuexをインポートします。 Vue.use（Vuex）; const store = new Vuex.Store（{ state：{ // 存储トークン Authorization：localStorage.getItem（ 'Authorization'）？localStorage.getItem（ 'Authorization'）： '' }、 mutations：{ // 修改token、そして将トークン存入localStorage changeLogin（state、user）{ state.Authorization = user.Authorization; localStorage.setItem（ 'Authorization' 、user.Authorization）; デフォルトのストアを エクスポートします。
設定ルートナビゲーションガード index.jsフォルダルータ のVueからのインポート「VUE」、 ルータからのインポート "VUE-ルータの; からインポートログイン「@ /コンポーネント/ログイン」; ホームからインポート「@ /コンポーネント/ホーム」; Vue.use（Router）; const router = new Router（{ routes：[ { path： '/' 、 redirect： '/ login' }、 { path： '/ login' 、 name： 'login' 、 component：login } 、 { path： '/ home' 、 name： 'home' 、 component：home } ] }）; // ナビゲーションガード /// router.beforeEachを使用してグローバルフロントガードを登録し、ユーザーが router.beforeEach（（to、from 、next） => { if（to.path === '/ login' ）{ next（）; } else { let token = localStorage.getItem（ 'Authorization' ）; if（token === 'null' ||トークン=== '' ）{ next（ '/ login' ）; } else { next（）; } } }）; デフォルトルーターを エクスポートします。
リクエストヘッダーとトークンの追加 //メインリクエストインターセプター、トークンの追加 axios.interceptors.request.use（ config => { if（localStorage.getItem（ 'Authorization' ））{ config.headers .Authorization = localStorage.getItem（ 'Authorization' ）; } return config; }、 error => { return Promise.reject（error）; }）;
フロントエンドがステータスコード401を取得した場合、トークン情報をクリアして、ログインページ localStorage.removeItem（ 'Authorization' ）; this。$ Router.push（ '/ login' ）; link：https：// www.jianshuにジャンプします。.com / p / 32e6eb23147f