Implementierungsmethode der Vue-Anmelderegistrierung (Codeanalyse)

Der Inhalt dieses Artikels befasst sich mit der Implementierungsmethode der Vue-Login-Registrierung (Code-Analyse). Ich hoffe, dass er für Freunde hilfreich ist.

Über die Vue-Anmelderegistrierung und die Beibehaltung des Anmeldestatus ist dies die einzige Möglichkeit für Vue-Spieler. Es gibt viele Lösungen im Internet, aber einige sind zu kompliziert und Neulinge könnten verwirrt sein eine Methode, die ich beim Schreiben meiner eigenen Projekte verwende und die nicht schwer zu verstehen ist.

Es gibt einige Routen im Projekt, für deren Eingabe eine Anmeldung erforderlich ist, z. B. Startseite, persönliches Center usw.
Es gibt einige Routen, für die keine Anmeldung erforderlich ist Geben Sie beispielsweise Anmeldeseite, Registrierungsseite, vergessenes Passwort usw. ein.
Wie kann dann beurteilt werden, ob für die Route eine Anmeldung erforderlich ist? Beim Routing von JS muss viel Aufhebens gemacht werden

Meta-Unterscheidung in router.js hinzufügen

Wenn Sie sich beispielsweise auf der Registrierungsseite anmelden, können Sie eingeben ohne sich anzumelden, dann setzen wir das Meta-Flag isLogin auf false

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

und auf der Startseite müssen wir uns anmelden, um einzutreten, dann setzen wir das Flag isLogin im Meta auf true

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

Auf diese Weise unterscheiden wir, ob für die Eingabe jeder Route eine Anmeldung erforderlich ist.

Als nächstes ändern wir den Post-Login-Status in login.vue

Wir verwenden Axios, um eine Login-Anfrage im Hintergrund zu initiieren

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

Das ist was ich in Vuex Written mache (wenn das Projekt Vuex nicht erfordert, dann verwende einfach HTML5, um es direkt zu speichern):

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

Hier kommt der entscheidende Punkt~, in 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);
});

like this Die Login-Registrierung für Vue ist abgeschlossen. Wenn der Benutzer am nächsten Tag den Browser schließt oder die Website erneut aufruft, kann der Benutzer weiterhin angemeldet bleiben, bis er sich manuell abmeldet.

Tipps: Benutzer benötigen zum Beenden nur localStorage.removeItem("Flag")

Verwandte Empfehlungen:

Laravel implementiert die Benutzerregistrierung und Login, Laravel implementiert Benutzerregistrierung_PHP-Tutorial

JS implementiert Dropdown-Menü-Login-Registrierungs-Popup-Fenster

Das obige ist der detaillierte Inhalt vonImplementierungsmethode der Vue-Anmelderegistrierung (Codeanalyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!