Technology stack

  • Vue. Js main frame
  • Vuex status management
  • Vue-router Manages routes

General process

In the general login process, one front-end scenario is:

  1. Check status: when entering the page orWhen the route changesFirst,judgeWhether there is login status (saved incookieorThe local storeThe value of the);
  2. If there is a login state, query the login information (UID, avatar, etc.). And keep it; If not, jump to the login page.

If you are not logged in

  1. On the login page (or login box), check whether the user input information is legitimate; (Check whether the form re is valid)
  2. Send login request after successful check; If the calibration is not successful, feedback to the user;
  3. If the login succeeds, it is removed from the backend datasessionInformation save login status (may need to jump); If the login fails, a message is displayed indicating that the user is unsuccessful.
  4. The login status was deleted when the user logged out. (Determine whether cookies exist)

Two pages have been written before, assuming that the login page route is /login and the post-login route is /userinfo. All you need to do is put router-View in app.vue to store and render the two routes.

// App.vue

<template>  <div id="app">    <router-view/>  </div></template>
Copy the code

And do
vue-routerConfiguration: 

// router/index.js

import Vue from 'vue'import Router from 'vue-router'import login from '@/components/login'import UserInfo from '@/components/userinfo'

Vue.use(Router)
exportDefault new Router({// set two pages, not logged in jump login jump user_info // check whether login based on local cookie: [{path:'/login',      component: login    }, {      path: '/user_info',      component: UserInfo    }]
})
Copy the code


1. Check the status and jump (already logged in)

How to determine whether logged in? By using the checkLogin() method in main.js

We need to check the status:

1. When the user opens the page;
2. When the route changes.

CheckLogin:

// main.js Vue.prototype.getCookie = getCookie; /* eslint-disable no-new */new Vue({ el:'#app',  router,  template: '<App/>', components: {App, ElementUI}, watch: {// Monitor router detect url, address bar changes when the route changes"$route": 'checkLogin'  },  created() {// the Vue life cycle comes up with an execution this.checklogin (); }, methods: {checkLogin() {// check whether there is a session //cookie operation method in the source code or refer to the web can beif(! this.getCookie('session')) {// Jump to login page this if there is no login status.$router.push('/login');      } else{// Otherwise jump to the login page this.$router.push('/user_info'); }}}})Copy the code

At this point, we have completed step 1 of the general process. If the login is successful, jump to

this.$router.push('/user_info');Copy the code





If you have not logged in successfully, jump to login. vue Login page as follows:

Enter checksum to send login request

In order to prevent some characters that do not conform to expectations and too frequent requests to the background, the front end to the user’s input to verify and prevent repeated requests. Of course, the legal characters of different websites are not the same, here only as blank time is not legal check:

// login.vue
<template>  <div id="login">    <el-form ref="form" :model="form" label-width="80px">      <el-form-item label="Account">        <el-input v-model="form.name"></el-input>      </el-form-item>      <el-form-item>        <el-button type="primary" @click="login"</el-button> </el-button> </el-form-item> </el-form> </div></template> methods: {// Click Execute Login now to execute the login methodlogin() {// call the login method to store cookiesif(this.form==""If the value in the input is null this.tologin (); },toLogin() {        setTimeout(() => {// Login status expires after 15 daysletexpireDays = 1000 * 60 * 60 * 24 * 15; // Store local cookies this.setcookie ('session'.'blablablablabla... ', expireDays);          this.isLoging = false; <router-link :to="..."> is equivalent to calling router.push(...) Push means jump this.$router.push('/user_info'); }}}, 300)Copy the code

If login is successful, jump to user_Info.vue.