Méthode de mise en œuvre de l'enregistrement de la connexion Vue (analyse du code)

Le contenu de cet article concerne la méthode de mise en œuvre de l'enregistrement de la connexion Vue (analyse du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Concernant la connexion et l'enregistrement de Vue, et rester connecté, c'est le seul moyen pour les joueurs de Vue. Il existe de nombreuses solutions sur Internet, mais certaines sont trop compliquées et les débutants peuvent être confus. présenter une méthode que j'utilise lors de l'écriture de mes propres projets et qui n'est pas difficile à comprendre.

Il y a certains itinéraires dans le projet qui nécessitent une connexion pour entrer, comme la page d'accueil, le centre personnel, etc.
Il y a certains itinéraires qui ne nécessitent pas de connexion Entrez, comme la page de connexion, la page d'inscription, le mot de passe oublié, etc.
Alors comment juger si l'itinéraire nécessite une connexion ? Il faut faire des histoires dans le routage JS

Ajouter une méta distinction dans router.js

Par exemple, si vous vous connectez à la page d'inscription, vous pouvez saisir sans nous connecter, nous mettons méta. Le drapeau isLogin est défini sur false

{
  //登录
  path: '/login',
  component: login,
  meta: {
    isLogin: false
  }
},
{
  //注册
  path: '/register',
  component: register,
  meta: {
    isLogin: false
  }
},

et sur la page d'accueil, nous devons nous connecter pour entrer, puis nous définissons le drapeau isLogin dans méta à true

{
  //首页
  path: '/home',
  component: home,
  meta: {
    isLogin: true
  },
}

De cette façon, nous distinguons si une connexion est requise pour saisir chaque itinéraire.

Ensuite, nous modifions le statut post-connexion dans login.vue

Nous utilisons axios pour lancer une demande de connexion en arrière-plan

this.$axios.post("/xxx/login", {user:name,password:pwd})
    .then(data => {
        //登录失败,先不讨论
        if (data.data.status != 200) {
          //iViewUi的友好提示
          this.$Message.error(data.data.message);
        //登录成功
        } else {
          //设置Vuex登录标志为true，默认userLogin为false
          this.$store.dispatch("userLogin", true);
          //Vuex在用户刷新的时候userLogin会回到默认值false，所以我们需要用到HTML5储存
          //我们设置一个名为Flag，值为isLogin的字段，作用是如果Flag有值且为isLogin的时候，证明用户已经登录了。
          localStorage.setItem("Flag", "isLogin");
          //iViewUi的友好提示
          this.$Message.success(data.data.message);
          //登录成功后跳转到指定页面
          this.$router.push("/home");
        }
 });

Dans Vuex I C'est écrit comme ceci (si le projet ne nécessite pas Vuex, alors utilisez simplement HTML5 pour le stocker directement) :

export const store = new Vuex.Store({
  // 设置属性
  state: {
    isLogin: false,
  },

  // 获取属性的状态
  getters: {
    //获取登录状态
    isLogin: state => state.isLogin,
  },

  // 设置属性状态
  mutations: {
    //保存登录状态
    userStatus(state, flag) {
      state.isLogin = flag
    },
  },

  // 应用mutations
  actions: {
    //获取登录状态
    setUser({commit}, flag) {
      commit("userStatus", flag)
    },
  }
})

Voici le point clé~, dans main.js

router.beforeEach((to, from, next) => {

  //获取用户登录成功后储存的登录标志
  let getFlag = localStorage.getItem("Flag");

  //如果登录标志存在且为isLogin，即用户已登录
  if(getFlag === "isLogin"){

    //设置vuex登录状态为已登录
    store.state.isLogin = true
    next()

    //如果已登录，还想想进入登录注册界面，则定向回首页
    if (!to.meta.isLogin) {
       //iViewUi友好提示
      iView.Message.error('请先退出登录')
      next({
        path: '/home'
      })
    }
  
  //如果登录标志不存在，即未登录
  }else{

    //用户想进入需要登录的页面，则定向回登录界面
    if(to.meta.isLogin){
      next({
        path: '/login',
      })
      //iViewUi友好提示
      iView.Message.info('请先登录')
    //用户进入无需登录的界面，则跳转继续
    }else{
      next()
    }

  }

});

router.afterEach(route => {
  window.scroll(0, 0);
});

De cette façon, l'enregistrement de connexion à Vue est terminé. Lorsque l'utilisateur ferme le navigateur ou accède à nouveau au site Web le lendemain, l'utilisateur peut toujours rester connecté jusqu'à ce qu'il soit connecté. se déconnecte manuellement.

Conseils : Les utilisateurs n'ont besoin que de localStorage.removeItem("Flag") pour quitter

Recommandations associées :

Laravel implémente l'enregistrement des utilisateurs et connexion, laravel implémente le didacticiel PHP d'enregistrement des utilisateurs

JS implémente la fenêtre contextuelle d'enregistrement de connexion du menu déroulant

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!