Vuex implémente différentes autorisations pour les utilisateurs connectés et non connectés

Cette fois, je vais vous apporter différentes autorisations pour que vuex implémente la connexion et la non-connexion. Quelles sont les précautions pour que vuex implémente différentes autorisations de connexion et de non-connexion. un cas pratique. Jetons un coup d'oeil.

L'idée de base est d'utiliser la gestion de l'état de vuex pour stocker l'état de connexion (en fait, cela signifie stocker une valeur, telle qu'un jeton), puis de juger l'état de connexion avant le saut de routage. Vous pouvez utiliser la garde frontale globale de vue-router avantEach, ou vous pouvez utiliser la garde exclusive de routage avant Enter.

Garde de navigation

Comme son nom l'indique, les gardes de navigation fournis par vue-router sont principalement utilisés pour surveiller la navigation en sautant ou en annulant. Il existe de nombreuses possibilités d'intégration dans le processus de navigation d'itinéraire : globale, Exclusif à un seul itinéraire ou au niveau d'un composant. N'oubliez pas que les modifications apportées aux paramètres ou aux requêtes ne déclenchent pas les gardes de navigation d'entrée/sortie. Vous pouvez le faire en observant $route Objet pour gérer ces modifications, ou utilisez une garde beforeRouteUpdate dans le composant.

Processus complet d'analyse de navigation

1. La navigation est déclenchée.

2. Appelez le gardien de congé dans le composant désactivé.

3. Appelez le garde global beforeEach.

4. Appelez la garde beforeRouteUpdate (2.2+) dans le composant réutilisé.

5. Appelez avant d'entrer dans la configuration du routage.

6. Analysez les composants de routage asynchrone.

7. Appelez beforeRouteEnter dans le composant activé.

8. Appelez le garde global beforeResolve (2.5+).

9. La navigation est confirmée.

10. Appelez le hook global afterEach.

11. Déclenchez la mise à jour du DOM.

12. Utilisez l'instance créée pour appeler la fonction de rappel passée à next dans la garde beforeRouteEnter.

Garde Globale

Vous pouvez utiliser router.beforeEach pour enregistrer un front guard global

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

Lorsqu'une navigation est déclenchée, les front guards globaux sont appelés dans l'ordre dans lequel ils ont été créés. Les gardes sont analysées et exécutées de manière asynchrone. À ce stade, la navigation attend que toutes les gardes soient résolues.

Chaque méthode de garde reçoit trois paramètres :

to : Route : L'objet de routage cible qui est sur le point d'entrer dans

from : Itinéraire : L'itinéraire que la navigation actuelle est sur le point de quitter

next : Fonction : Cette méthode doit être appelée pour résoudre ce hook. L'effet d'exécution dépend des paramètres d'appel de la méthode suivante.

next() : passez au hook suivant dans le pipeline. Si tous les hooks sont exécutés, l'état de navigation est confirmé.

next(false) : interrompre la navigation en cours. Si l'URL du navigateur change (peut-être manuellement par l'utilisateur ou par le bouton Précédent du navigateur), l'adresse URL sera réinitialisée à l'adresse correspondant à l'itinéraire d'origine.

next('/') ou next({ path: '/' }) : accéder à une adresse différente. La navigation en cours est interrompue et une nouvelle navigation démarre.

next(error):(2.4.0+) Si le paramètre passé à next est une instance d'Error, la navigation sera terminée et l'erreur sera transmise au rappel enregistré par router.onError().

Assurez-vous d'appeler la méthode suivante, sinon le hook ne sera pas résolu.

Garde exclusive d'itinéraire

Vous pouvez définir la garde beforeEnter directement sur la configuration de l'itinéraire :

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

Il existe d'autres gardes. Pour plus de détails, veuillez consulter la documentation officielle https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

Après avoir installé vuex

Créer 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

Introduisez l'importation { mapActions, mapState } depuis 'vuex'

Changez ensuite le statut de connexion, base_url est le chemin

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;
          }
        })
      }
    }
  }

Ensuite, utilisez simplement Route Guard

exemple d'utilisation de beforeEach

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();
  }
})

exemple d'utilisation beforeEnter

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怎么重新加载路由页面

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!