How to create a pop-up window function in vue to determine user login

In modern web applications, user authentication and authorization are very important. To do this, many applications need to determine whether the user is logged in and force them to log in if they are not. In Vue.js we can easily achieve this using its lifecycle methods and route navigation guards. This article will introduce how to use Vue.js to create a pop-up window to determine user login.

First, we need to define a general pop-up component that displays a message and allows the user to close the pop-up window. We can create this component using the component functionality of Vue.js. Here is a simple example:

<template>
  <div class="modal" v-show="show">
    <div class="modal-content">
      <p>{{ message }}</p>
      <button v-on:click="close">Close</button>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String,
        default: 'Please log in to continue'
      },
      show: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      close: function () {
        this.$emit('close');
      }
    }
  }
</script>

<style>
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    max-width: 400px;
    text-align: center;
  }
</style>

Now we have a universal popup component that can be used for any purpose. Next, we need to check the user's login status when they try to access a page that requires login. We can achieve this using Vue.js’ navigation guards. In Vue.js, a route guard is a set of methods that we can run before, after, or during navigation to a route. In our case, we will use the "beforeEach" navigation guard, which will be run every time the user visits a new page.

In our Vue.js application, we can define routing guards in the router.js file. The following is an example:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Login from './views/Login.vue'
import AuthModal from './components/AuthModal.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.name !== 'login' && !isLoggedIn()) {
    const authModal = new Vue(AuthModal).$mount();
    authModal.$on('close', () => {
      authModal.$destroy();
    });
    Vue.nextTick(() => {
      document.body.appendChild(authModal.$el);
    })
  } else {
    next();
  }
})

function isLoggedIn() {
  // Check whether the user is logged in or not
}

export default router

In this example, we define two routes, one is the Home component route and the other is the Login component route. We defined a "beforeEach" guard for the entire navigation of the application that checks the user's logged-in status before they navigate to a new page. If the user is not logged in and the page is not a login page, then we will display a pop-up component on the screen to prompt the user to log in. We use the instantiation function of Vue.js to create this pop-up component and destroy it when the user chooses to close the pop-up window. Finally, we check if the user is logged in and if so, allow the user to continue navigation.

Finally, we need to make sure that after the user successfully logs in, we log their status. We can use Vuex, the state management library of Vue.js, to manage the state in the application. Here is an example:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    isLoggedIn: false
  },
  mutations: {
    login(state) {
      state.isLoggedIn = true;
    },
    logout(state) {
      state.isLoggedIn = false;
    }
  },
  actions: {
    login({ commit }) {
      // Log the user in
      commit('login');
    },
    logout({ commit }) {
      // Log the user out
      commit('logout');
    }
  }
})

export default store

In this example, we define a state (isLoggedIn), a "login" mutation to mark the user as logged in, and a "logout" mutation to log the user out . We also define actions (login) and (logout) to handle authentication and status update logic behind the scenes.

Now we have implemented a user login pop-up window in the Vue.js application. We use Vue.js's native life cycle methods and route navigation guards to make it easy for users to authenticate and authorize through different Vue components and application states.

The above is the detailed content of How to create a pop-up window function in vue to determine user login. For more information, please follow other related articles on the PHP Chinese website!