web-dev-qa-db-ja.com

vue-router.beforeEachをチェックインしてルートへのアクセスを制限しない

まず、vuejs 2.0とwebpack、vue-router（履歴モード-SPAサイト）、およびホットモジュールをロードするwebpackdevサーバーで実行されているvuexを使用しています。

コンポーネントにマップされた約10のルートがあります。サイトは正常に機能していますが、トークンベースの認証を追加しています。 router.beforeEachを使用してトークンチェックを実行しています。トークンが有効な場合は、トークンを通過させる必要があります。トークンが無効な場合は、トークンを/ loginページにリダイレクトする必要があります。問題は、チェックを実行し、最初に制限することです。しかし、2回目の試行では、ページに移動してコンテンツを表示できます。 1秒おきのリクエストはルートを適切に処理し、/ loginにリダイレクトするようです。私のcheckToken（）関数は、テスト目的で常にfalseを返します。

コード：

// Configure Router
const router = new Router({
    routes, //routes are configured elsewhere, they work fine so not needed
    mode: 'history'
})

router.beforeEach((to, from, next) => {
    if(to.path != '/login') {
        if(checkToken()) { 
            logger('There is a token, resume. (' + to.path + ')');
            next();
        } else {
            logger('There is no token, redirect to login. (' + to.path + ')');
            next('login');
            // next('/login');
            // router.Push('login');
        }
    } else {
        logger('You\'re on the login page');
    }
    next();
});


function checkToken() {
    return false;
}

メインページ（ "/"）に移動すると、期待どおりに/ loginにリダイレクトされます。私のコンソールには、次の2つのエントリがあります。

[14：36：30.399]：トークンがありません。ログインにリダイレクトしてください。 （/）[14：36：30.399]：ログインページを表示しています

良さそうです。 「/」を読み込もうとしましたが、トークンがないことがわかり、/ loginにリダイレクトされました。ここで、チェックはログインページにいることを確認して停止します。

次に、Projectsリンクをクリックして、/ projectに移動します。コンソール出力：

[14：40：21.322]：トークンがありません。ログインにリダイレクトしてください。 （/事業）

完璧ですが、loginページではなく、projectsページが実際に表示されています。

次に、Sitesリンクをクリックして/ siteに移動します。コンソール出力：

[14：41：50.790]：トークンがありません。ログインにリダイレクトしてください。 （/ site）[14：41：50.792]：ログインページを表示しています

見栄えがよく、ブラウザにsiteページが表示されています。これはまさに私が見たいものです。

次に、Requestsリンクをクリックして/ requestにリンクします。コンソール出力：

[14：44：13.114]：トークンがありません。ログインにリダイレクトしてください。 （/リクエスト）

しかし、繰り返しになりますが、リダイレクトはしていません。 loginページが表示されるはずなのに、requestページが表示されます。

今回は、Projectsリンク（/ project）をもう一度クリックすると、projectページではなくprojectページが誤って表示されていました。 login）==ページ。コンソール出力：

[14：47：12.799]：トークンがありません。ログインにリダイレクトしてください。 （/ project）[14：47：12.800]：ログインページが表示されています

今回は、必要に応じて/ loginページにリダイレクトしました。

クリックした順序やリンクに関係なく、適切にリダイレクトされるのは、文字通り、クリックした他のすべてのリンクです。 1つ目はリダイレクト、2つ目はリダイレクトしない、3つ目はリダイレクトする、4つ目はリダイレクトしない、5つ目はリダイレクトするなど...

Next（ '/ login'）、next（ 'login'）、router.Push（ 'login'）を試しましたが、すべて同じ結果になりました。いつリダイレクトするかはわかりますが、リダイレクトは1回おきにしか機能しません。

完全なリクエスト（ページの更新、アドレスの入力、Enterキーの押し）を実行すると、計画どおりに常に/ loginにリダイレクトされますが、SPAでこれを実行しようとしています。私が欠けているものはありますか？

vue.jsvuejs2vue-router
6
sdouble

修繕。私の側の監視。

これはルーターコードがどうあるべきかです：

_router.beforeEach((to, from, next) => {
    if(to.path != '/login') {
        if(checkToken()) { 
            logger('There is a token, resume. (' + to.path + ')');
            next();
        } else {
            logger('There is no token, redirect to login. (' + to.path + ')');
            next('login');
        }
    } else {
        logger('You\'re on the login page');
        next(); // This is where it should have been
    }
    // next(); - This is in the wrong place
});
_

簡単な答えで愚かな問題、私は私のnext()を間違った場所に置いていたので、それは常に最後にそれを処理していました。しかし、なぜそれが正しくリダイレ​​クトされたのか、私はまだ興味があります。

18
sdouble