Utilisez vuex pour stocker l'état de connexion et désactiver la navigation en mode non connecté. Quelles sont les méthodes spécifiques ?

Ci-dessous, je partagerai avec vous un article sur la façon dont vuex implémente le stockage du statut de connexion et n'autorise pas la navigation en statut non connecté. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

L'idée de base est d'utiliser la gestion de l'état vuex pour stocker l'état de connexion (en fait, il s'agit de stocker une valeur, telle qu'un jeton), puis de juger l'état de connexion avant que la route ne saute. garde avant globale de vue-router beforeEach, vous pouvez également utiliser la garde exclusive de route beforeEnter.

Navigation Guard

Comme son nom l'indique, le garde de navigation fourni par vue-router" est principalement utilisé pour garder la navigation en sautant ou en annulant Il existe de multiples possibilités d'intégration dans la navigation par itinéraire : globalement, par itinéraire ou au niveau des composants. 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 l'objet $route à gérer. ces modifications, ou utilisez le composant guard de beforeRouteUpdate

Processus d'analyse de navigation complet

1 La navigation est déclenchée 🎜>

2. . Appelez le garde exit dans le composant désactivé

3. Appelez le garde global beforeEach

4.

5. Appelez beforeEnter dans la configuration de routage. 6. Analysez le composant de routage asynchrone. 7. Appelez beforeRouteEnter dans le composant activé

8. Appelez la garde globale beforeResolve (2.5+). 9. La navigation est confirmée.

10. Appelez le hook global afterEach

11. Déclencheur du DOM

12. passé à next dans la garde beforeRouteEnter

Global guard

Vous pouvez utiliser router.beforeEach pour enregistrer une pré-garde globale

Lorsqu'une navigation est déclenchée, la pré-garde globale est appelée dans l'ordre de création. La garde est exécutée de manière asynchrone, et la navigation est exécutée dans toutes les directions. La garde attend que la résolution soit terminée. 🎜>Chaque méthode de garde reçoit trois paramètres : vers : Route : l'objet de routage cible à saisir

depuis : Route :L'itinéraire que la navigation actuelle s'apprête à 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

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

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

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

next('/') ou next({ path: '/' }) : Accédez à une autre adresse. 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.

Gardes exclusives à l'itinéraire

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

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

Après avoir installé vuex

Créez store.js

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

login.vue et introduisez import { mapActions,mapState } from 'vuex'

Puis changez le statut de connexion, base_url est le chemin

Ensuite, utilisez simplement le garde de routage

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

beforeEach exemple d'utilisation

beforeEntrez les exemples d'utilisation

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

beforeEntrez les exemples d'utilisation

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

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

Articles connexes :

Exemple de méthode Node.js pour implémenter la fonction d'activation par e-mail d'inscription

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

Préprocesseur de fichier Webpack babel-loader Explication détaillée

Exemple jQuery de défilement d'actualités et d'effets de fondu d'entrée et de sortie

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!