vuexを使用してログイン状態を保存し、非ログイン状態での閲覧を禁止するには具体的にどのような方法がありますか?

ここで、vuex がログイン状態の保存を実装し、未ログイン状態での閲覧を許可しない方法についての記事を共有します。これは良い参考値であり、皆様のお役に立てれば幸いです。

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

ナビゲーションガード

その名前が示すように、vue-routerによって提供されるナビゲーションガードは、主にジャンプまたはキャンセルによってナビゲーションをガードするために使用されます。ルートナビゲーションプロセスには、グローバル、個々のルート固有、またはコンポーネント レベルの変更は、$route オブジェクトを監視するか、コンポーネント内の beforeRouteUpdate

を使用することによって、開始/終了ナビゲーション ガードをトリガーしないことに注意してください。ナビゲーションの解析プロセスを完了します 1. ナビゲーションがトリガーされます。

3. 再利用されたコンポーネントで、グローバルの beforeEach ガードを呼び出します。 +)

5. ルーティング設定での呼び出し

7. グローバル beforeResolve ガードの呼び出し。 . グローバル afterEach フックを呼び出します。

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

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

ナビゲーションがトリガーされると、グローバル フロント ガードが作成順に呼び出され、ナビゲーションはすべてのガードが解決されるまで待機します

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

to: Route: 進入しようとしているターゲット ルート オブジェクト

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

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

next(): すべてのフックが実行された場合、ナビゲーションのステータスが確認されます ( 確認済み) : ブラウザの 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;
          }
        })
      }
    }
  }

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

前各使用例

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}表示把当前路由信息传递过去方便登录后跳转回来
     }
   } 
    }
   ]
})

上記は、私が皆さんのためにまとめたものです、私は願っています将来的には誰にとっても役立つでしょう。

関連記事:

Node.js登録メール起動機能実装例

Webpackのbabel-loaderファイルプリプロセッサ詳細解説

jQueryニュース放送スクロールとフェードイン・フェード実装例-アウトエフェクト

以上がvuexを使用してログイン状態を保存し、非ログイン状態での閲覧を禁止するには具体的にどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。