Implementation method of Vue login registration (code analysis)

The content of this article is about the implementation method of Vue login registration (code analysis). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

About vue login registration and keeping the login status, it is the only way for vue players. There are many solutions on the Internet, but some are too complicated, and newbies may be confused. Now here is Let me introduce a method that I use when writing my own projects and is not difficult to understand.

There are some routes in the project that require login to enter, such as the home page, personal center, etc.
There are some routes that do not require login Enter, such as login page, registration page, forgotten password, etc.
How to determine whether the route requires login? It is necessary to make a fuss in routing JS

Add meta distinction in router.js

For example, if you log in to the registration page, you can enter without logging in, then we put meta The isLogin flag in is set to false

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

and on the homepage we need to log in to enter, then we set the isLogin flag in meta to true

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

In this way we distinguish whether login is required to enter each route.

Next we modify the post-login status in login.vue

We use axios to initiate a login request to the background

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

This is what I do in Vuex Written (if the project does not require Vuex, then just use HTML5 to store it directly):

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

Here comes the key point~, 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 The login registration for Vue has been completed. When the user closes the browser or enters the website again the next day, the user can still remain logged in until the user manually logs out.

Tips: Users only need localStorage.removeItem("Flag") to exit

Related recommendations:

Laravel implements user registration And login, laravel implements user registration_PHP tutorial

JS implements drop-down menu login registration pop-up window

The above is the detailed content of Implementation method of Vue login registration (code analysis). For more information, please follow other related articles on the PHP Chinese website!