Vuex は、ログインしている場合とログインしていない場合に異なる権限を実装します。

今回は、ログインと非ログインで異なる権限を実装するための vuex について説明します。ログインと非ログインで異なる権限を実装するための vuex の notes について、実際のケースを見てみましょう。

基本的な考え方は、vuex 状態管理を使用してログイン状態を保存し (実際にはトークンなどの値を保存することを意味します)、ルーティングジャンプの前にログイン状態を判断する前に vue-router のグローバル フロント ガードを使用することができます。または、Enter の前にルーティング排他的ガードを使用することもできます。

ナビゲーションガード

名前が示すように、vue-router が提供するナビゲーション ガードは、主にジャンプまたはキャンセルによってナビゲーションを保護するために使用されます。ルート ナビゲーション プロセスに組み込まれる機会は数多くあります。 単一のルートまたはコンポーネント レベルに限定されます。 パラメータまたはクエリを変更しても、開始/終了ナビゲーション ガードはトリガーされないことに注意してください。 $route を観察することでこれを行うことができます これらの変更を処理するオブジェクト、またはコンポーネント内で beforeRouteUpdate ガードを使用します。

完全なナビゲーション分析プロセス

1. ナビゲーションがトリガーされます。

2. 非アクティブ化されたコンポーネントでリーブガードを呼び出します。

3.Each ガードの前にグローバルを呼び出します。

4. 再利用されたコンポーネントで beforeRouteUpdate ガード (2.2 以降) を呼び出します。

5. ルーティング設定に入る前に呼び出します。

6. 非同期ルーティング コンポーネントを解析します。

7. アクティブ化されたコンポーネントで beforeRouteEnter を呼び出します。

8. グローバル beforeResolve ガード (2.5 以降) を呼び出します。

9. ナビゲーションが確認されました。

10. グローバルの afterEach フックを呼び出します。

11. DOM 更新をトリガーします。

12. 作成したインスタンスを使用して、beforeRouteEnter ガードの next に渡されるコールバック関数を呼び出します。

グローバルガード

router.beforeEach を使用して、ガード前にグローバルを登録できます

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

ナビゲーションがトリガーされると、グローバル フロント ガードが作成された順序で呼び出されます。ガードは非同期で解析および実行されます。現時点では、ナビゲーションはすべてのガードが解決されるまで待機します。

各ガード メソッドは 3 つのパラメータを受け取ります:

to: Route: これから入ろうとしているターゲットルーティングオブジェクト

from: Route: 現在のナビゲーションが出発しようとしているルート

next: 機能: このフックを解決するには、このメソッドを呼び出す必要があります。実行効果は、次のメソッドの呼び出しパラメータによって異なります。

next(): パイプライン内の次のフックに進みます。すべてのフックが実行されると、ナビゲーションのステータスが確認されます。

next(false): 現在のナビゲーションを中断します。ブラウザの URL が変更されると (おそらくユーザーが手動で、またはブラウザの [戻る] ボタンによって)、URL アドレスは from ルートに対応するアドレスにリセットされます。

next('/') または next({ path: '/' }): 別のアドレスにジャンプします。現在のナビゲーションが中断され、新しいナビゲーションが開始されます。

next(error):(2.4.0+) next に渡されたパラメータが Error インスタンスの場合、ナビゲーションは終了し、エラーは router.onError() によって登録されたコールバックに渡されます。

必ず次のメソッドを呼び出してください。そうしないとフックが解決されません。

ルーティング専用ガード

beforeEnter ガードをルート設定で直接定義できます:

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   }
  }
 ]
})

他にもガードがありますので、詳しくは公式ドキュメントをご覧くださいhttps://router.vuejs.org/zh-cn/advanced/navigation-guards.html

vuexのインストール後

store.js を作成します

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
  isLogin: 0
}
const mutations = {
  changeLogin(state,status){
    state.isLogin = status;
  }
}
const actions = {
  loginAction({commit}){
    commit('changeLogin',1);
  }
}
export default new Vuex.Store({
  state,
  actions,
  mutations
})

login.vue

「vuex」からインポート {mapActions,mapState} を導入します

次に、ログインステータスを変更します。base_url はパスです

export default {
    name: 'Login',
    data(){
      return{
        loginForm: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
        },
        showLogin: false
      }
    },
    mounted(){
      this.showLogin = true;
    },
    computed: {
      ...mapState(['isLogin'])
    },
    methods: {
      ...mapActions(['loginAction']),
      submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if(valid){
            if(this.loginForm.username == 'aaa' && this.loginForm.password == '111'){
              console.log('验证通过');
              this.loginAction();
              this.$router.push('manage');
            }else{
              console.log('账号密码出错');
              // this.$message.error('账号密码出错');
              this.$message({
                type: 'error',
                message: '账号密码出错'
              });
            }
            console.log('请求地址: ' + base_url);
          }else{
            console.log('验证失败');
            return false;
          }
        })
      }
    }
  }

次に、ルートガードを使用するだけです

before各使用例

router.beforeEach((to,from,next)=>{
  if(to.meta.check){
    var check = async function(){
      const result = await checkUser();
      if(result.status == 0){
        next();
      }else{
        alert('用户未登录');
        next({path: '/login'});
      }
    }
    check(); //后台验证session
  }else{
    next();
  }
})

前に使用例を入力してください

export default new Router({
  routes: [
    {
     path: '/login',
     component: Login
    },
    {
      path: '/manage',
      name: '',
      component: Manage,
      beforeEnter: (to,from,next)=> {  //导航守卫
      console.log(to)
      console.log(from)
      if(store.state.isLogin == 1){
       console.log('用户已经登录');
       next();
      }else{
       console.log('用户未登录');
       next({path: '/login',query:{ Rurl: to.fullPath}}); //未登录则跳转到登陆界面，query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来
     }
   } 
    }
   ]
})

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue.js底部导航栏的子路由不显示怎么处理

AngularJS怎么重新加载路由页面

以上がVuex は、ログインしている場合とログインしていない場合に異なる権限を実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。