vueでのアクセス権限のログインブロックとジャンプ

vueでルーティングジャンプを行うと、$routeオブジェクトに1つのルーティングレコードが格納され、ルーティングが一致するすべてのルーティングレコードが$routeオブジェクト(ナビゲーションガード内のルーティングオブジェクトもある)に露出し、これらのレコードは$route.matchedで取得でき、返された結果は配列オブジェクトとなり、中にはtoがルーティングを指す関連情報があります.例えば、path、name、metaなどです.
同時に、各routerがジャンプする前に呼び出される方法、すなわちvur-routerのフック関数beforEachです.
まず、beforEachの3つのパラメータについて説明します.

to:routerがアクセスするルーティングオブジェクト.

from:現在のナビゲーションが離れようとしているルーティング.

next:functionは、resolveというフックに必ずこのメソッドを呼び出す必要があります.実行効果はnextメソッドの呼び出しパラメータに依存します.

next():パイプ内の次のフックを行います.

next(false):現在のナビゲーションを中断します.ブラウザのURLが変更された場合(ユーザ手動またはブラウザ後退ボタンの可能性があります)、URLアドレスはfromルーティングに対応するアドレスにリセットされます.

next('/')またはnext({path:'/'}):異なるアドレスにジャンプします.現在のナビゲーションが中断され、新しいナビゲーションが行われます.任意の位置のオブジェクトをnextに渡すことができ、replace:true、name:‘home’などのオプションとrouter-linkで使用するto propまたはrouterを設定することができます.pushのオプションは、nextがqueryを介してパラメータを渡すことができることに注意してください.

next(error):(2.4.0+)nextに入力パラメータがErrorインスタンスである場合、ナビゲーションは終了する、エラーはrouterに伝達される.onError()に登録されたコールバック.

次に、$route.matchedによって取得された配列を呼び出し、配列のsome()メソッドを呼び出して、その戻り値trueまたはfalseに基づいてルーティングジャンプの管理を行うことができる.
ルーティングに関する構成:

{
      path: '/mine',
      name: 'mine',
      component:resolve => require(['@/components/settings/WorkflowSettings'],resolve),
      meta:{
        title:"     ",
        auth:true//         
       }  
 }

次に、フック関数で関連条件の判断を行います.

router.beforeEach((to, from, next) => {
    //              （           ）
    if (to.matched.some(record=> record.meta.auth)) {
        if (window.sessionStorage.token !== null) {
            next()
        } else {
            //      
            if (to.name === 'login') {
                next();
                return
            }
            next({
                path: '/login',
            });
        }
    } else {
        next()//             ,          
    }
});

小知識点:
定義と使用法:some()メソッドは、配列内の要素が指定された条件(関数提供)を満たすかどうかを検出します.
some()メソッドは、配列の各要素を順次実行します.
条件を満たす要素がある場合、式はtrueを返し、残りの要素は検出を実行しません.条件を満たす要素がない場合はfalseを返します.注意:some()は空の配列を検出しません.
注意:some()は元の配列を変更しません.構文:

var arr = [23,44,3]
if (arr.some(val => val < 10)) {
console.log('true')
}

some英語はいくつかに翻訳され、everyはそれぞれに翻訳されるので、someメソッドはそのうちの1つがtrueであればtrueを返します.逆に、every()メソッドはすべてtrueを返さなければtrueを返しません.falseが1つあってもfalseを返します.every()とsome()の目的:配列のすべてのメンバーが指定したテストを満たすかどうかを決定します.
every:偽物:
some:一真即真