<p>Vue を使用してこの小さなアプリを構築していますが、認証を機能させることができません。正確に言うと、リダイレクトが機能せず、true ログと Authenticated ログの両方が取得されますが、ホームページ (/) にはリダイレクトされません。しかし、アプリを開くと、すぐに /login に移動します。これは問題ありません。私もそうしたいのですが、前述したように、ログインしようとするとリダイレクトされません。 </p>
<p>これは私のログイン コンポーネントとルーターです。 </p>
<pre class="brush:php;toolbar:false;">import { createRouter, createWebHistory } from 'vue-router'
「@/views/LoginView.vue」から LoginView をインポートします
AboutView を '../views/AboutView.vue' からインポートします。
isAuthenticated を '@/views/LoginView.vue' からインポートします。
const router = createRouter({
履歴: createWebHistory(import.meta.env.BASE_URL),
ルート: [
{
パス: '/login'、
名前: 'ログイン'、
コンポーネント: ログインビュー
}、
{
パス： '/'、
名前: 「ホーム」、
メタ: {
認証が必要: true
}、
コンポーネント: AboutView、
beforeEnter:(to,_,next)=>{
if(to.meta.requiresAuth && !isAuthenticated.value){
次('/ログイン');
}
それ以外{
次（）;
router.push('/');
}
}
}
】
})
デフォルトルーター</pre>をエクスポートします。
<pre class="brush:php;toolbar:false;"><テンプレート>
<div>
<h2>アクセストークンを入力してログイン</h2>
<div class="col-md-8">
<section id="ログインフォーム">
<form @submit.prevent="checkAccessToken">
<div class="フォームグループ">
<label><b>アクセストークン</b></label>
<input v-model="accessToken" type="password" class="form-control" />
</div>
<input type="submit" value="Login" class="btn btn-primary" />
</フォーム>
</セクション>
</div>
</div>
</テンプレート>
<スクリプト設定 lang="ts">
'vue' から { ref} をインポートします
「@/router/index」からルーターをインポートします
const isAuthenticated = ref(false);
const accessToken = ref('');
const checkAccessToken = () => {
if (accessToken.value === '123') {
isAuthenticated.value = true;
console.log(isAuthenticated.value);
console.log('検証済み');
router.push('/');
} それ以外 {
}
};
</script></pre>
<p><br /></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
router.push()
次に、vue-router と同様のインポート方法を使用してみてください。 リーリーが機能しない場合のみ次に、
router.push('/')を使用します。