Vue-vue-router権限問題の解決

vueプロジェクトでは、バックエンドとのデータインタラクションはajxaのみで実行できます.ユーザー権限の問題を解決する上で、バックグラウンドのブロッカーはログインする必要がある要求をブロックすることができます.vueプロジェクトでは、vue-routerのナビゲーションガード機能も実現できます.

シーン記述

ユーザーがログインしていないため、トップページへのアクセスにユーザー権限を検証する必要はないシーンがあるとします.管理バックグラウンドページにアクセスすると、ユーザーがログインしていない場合に自動的にログインページにジャンプし、バックグラウンドのブロッキングと同様の効果が得られます.
vueプロジェクトでは、このような効果をどのように実現しますか.vue-routerが提供するナビゲーションガード機能により実現できます.

グローバルガード

vue-routerのナビゲーション・ガードは、グローバルであってもよいし、ルーティング・レベルであってもよい.次に、グローバルなナビゲーション・ガードがどのように実現されるかについて説明します.

まず、ログイン時にユーザがログインするか否かのフラグ位置(ログインプロセスのコードを省略する、ここではログインフラグの記憶のみを示す)

を記憶する.

    //     ，      
    var userinfo = response.data.result;
    userinfo.isSignin = true;//          
    that.$store.dispatch("setUserInfo", userinfo);

次に、アクセスするためにどのルーティングが必要であり、アクセスする必要がないかをルーティングテーブルに指定する必要があります./router/index.jsでは,バックグラウンド管理モジュールとトップページモジュールの違いは,バックグラウンド管理モジュールにmeta:{login_required:true}があり,これがルーティングのメタデータであり,ルーティングのいくつかのプライベート属性を設定できることである.このlogin_requiredとは、ログインしたユーザーのみが管理モジュールにアクセスできることを示すページです.

export default new Router({
  routes: [
    //     
    {
      path: '/', component: resolve => {require(['../components/home/Home'], resolve)},
      children: [
        {path: '/', name: 'index', component:  resolve => {require(['../components/home/Index'], resolve)},},
        {path: 'product1', name: 'product1', component:  resolve => {require(['../components/home/Product1'], resolve)},},
        {path: 'product2', name: 'product2', component: resolve => {require(['../components/home/Product2'], resolve)},},
        {path: 'contact', name: 'contact', component: resolve => {require(['../components/home/Contact'], resolve)},},
        //     
        {path: 'signin', name: 'signin', component: resolve => {require(['../components/sign/Signin'], resolve)},},
        {path: 'signup', name: 'signup', component: resolve => {require(['../components/sign/Signup'], resolve)},},
        {path: 'forgetpwd', name: 'forgetpwd', component: resolve => {require(['../components/sign/ForgetPwd'], resolve)},},
        {path: 'resetpwd', name: 'resetpwd', component: resolve => {require(['../components/sign/ResetPwd'], resolve)},}
      ]
    },
    //      
    {
      path: '/manage',meta: {login_required: true}, name: 'manage', component: resolve => {require(['../components/manage/Manage'], resolve)},
     
    }
  ]
});

ログインIDとログインが必要なルーティングが格納された後、次に、現在のログインIDがfalseであり、アクセスするルーティングがログインしなければアクセスできない場合、アクセスを拒否し、ログインページに直接ジャンプするグローバルなブロック判断が必要です.メールでjsでは、

が実現される.

//    
router.beforeEach((to, from, next) => {
  //       
  let isSignin = localStorage.getItem("isSignin");
  let matched = to.matched.some((item) => {
    return item.meta.login_required;
  });
  if(isSignin == 'false' && matched){
    next('/signin');
  }else{
    next();
  }

});

は、次に、/manageがジャンプする/signinページに直接アクセスするかどうかを検証することができます.

コンポーネントレベルのガード

たとえば、あるコンポーネントで、現在他のページに向かっているときに、現在のページの内容が失われることを警告するプロンプトが必要です.この効果はvue-routerでも実現できます
コンポーネント内:

 //      
 //  methodes    
beforeRouteLeave(to,from,next) {
  var that = this;
  let matched = to.matched.some((item) => {
    return item.meta.case_not_need_confirm;
  });
  if(matched || that.notNeedConfirm){//               
    next();
  }else{
    that.$confirm(that.$t('promotInfo.closePromot'), that.$t('promotInfo.prompt'), {
      confirmButtonText: that.$t('btnName.submitBtn'),
      cancelButtonText: that.$t('btnName.cancelBtn'),
      type: 'warning',
      center: true
    }).then(() => {
      next();
    });
  }
}

アラートを必要としないルーティングでは、このページにアクセスしてアラートを必要としないことを示すメタデータを追加できます.

 meta: {case_not_need_confirm: true}

まとめ

以上の2つの例により,筆者らは,グローバルおよびコンポーネントレベルでナビゲーション・ガードを実現する機能を示し,この効果は最終的にバックグラウンドのフィルタに相当し,これはシステムの安全性と可用性に大きく役立つ.