Vue.js writes an example of a SPA login page

Technology stack

• vue.js main framework

• vuex state management

• vue -router routing management

General process

In the general login process, a front-end solution is:

1. Check Status: Check whether there is login status when entering the page or when the route changes (the value saved in cookie or local storage);

2. if If there is a login state, query the login information (uid, avatar, etc...) and save it; if not, jump to the login page;

3. On the login page (or login box), Verify whether the information entered by the user is legal;

4. Send a login request after passing the verification; if the verification is unsuccessful, feedback to the user;

5. Log in If successful, the session information will be retrieved from the back-end data to save the login status (a jump may be required); if the login is unsuccessful, the user will be prompted to fail;

6. The user will make Delete login status during logout operation.

Below I will analyze how to implement the code one by one according to the steps listed. Everything is in the code, with more detailed comments to help understand the code.

Before this, it was assumed that the login page route was /login, and the route after login was /user_info. In this way, you only need to place router-view in App.vue for storing and rendering these two routes.

// component/App.vue
<template><div class="container" id="app">  <transition name="fade"><keep-alive>      <router-view></router-view></keep-alive>  </transition></div></template>
...

And do vue-routerConfiguration:

// js/app.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Login from '../component/Login.vue'import UserInfo from '../component/UserInfo.vue'

Vue.use(VueRouter);const router = new VueRouter({  routes: [{path: '/login',component: Login
  }, {path: '/user_info',component: UserInfo
  }]
})
...

Check status and jump

We need to check status at two times:1. When the user opens the page; 2. When the routing changes;

First you need to write a method to check the login statuscheckLogin：

// js/app.js
...
var app = new Vue({  data: {},  el: '#app',  render: h => h(App),
  router,
  store,  methods:{
    checkLogin(){      //检查是否存在session      //cookie操作方法在源码里有或者参考网上的即可      if(!this.getCookie('session')){//如果没有登录状态则跳转到登录页this.$router.push('/login');
      }else{//否则跳转到登录后的页面this.$router.push('/user_info');
      }
    }
  }
})

In order to improve the user experience, when the user opens the page, the front end needs to check whether he has logged in, and does not require the user to log in again. This implementation is very simple. We write it in the created hook of vue instance:

// js/app.js
...
var app = new Vue({
  ...
  created() {this.checkLogin();
  },  methods:{
    checkLogin(){
     ...
    }
  }
})

In addition, routing also needs to be checked when it changes. Login, in the following scenario (routing change), if we do not check the login status, an error may occur:

• The user has a login status when entering the page, but the login has expired when doing the operation;

• The user manually deleted the cookie/local storage and performed the operation;

• The user is Manually enter (or enter from favorites) a route that requires login when not logged in

• Route for users to enter the login page when logged in

These are enough reasons for us to monitor routing. If we implement it, we can use the watch function of vue:

// js/app.js
...
var app = new Vue({
  ...  //监听路由检查登录
  watch:{"$route" : 'checkLogin'
  },  //进入页面时
  created() {this.checkLogin();
  },  methods:{
    checkLogin(){
     ...
    }
  }
})

At this point, we are done## Step 1 in #General Process. Next, implement how to obtain user personal information.

Get user information

After successful login, we generally need to display some user information from the backend, such as nickname, avatar, level, etc... Obtaining it is very simple, send a http requests are pulled from the backend; but generally this information will be used in multiple routes (for example, uid generally needs to be carried as a parameter in each backend interface), so it needs to be saved in the global state (

vuex):

// component/App.vue
...
<script>export default {
  ...
  mounted(){//组件开始挂载时获取用户信息this.getUserInfo();
  },  methods: {//请求用户的一些信息
    getUserInfo(){      this.userInfo = {nick: &#39;Doterlin&#39;,ulevel: 20,uid: &#39;10000&#39;,portrait: &#39;images/profile.png&#39;
      }      //获取信息请求
      ts.$http.get(url, {//参数"params": this.userInfo
      }).then((response) => {//Successif(response.data.code == 0){          this.$store.commit(&#39;updateUserInfo&#39;, this.userInfo); 
        }
      }, (response) => {//Error
      });

    }
  }
}
</script>
...

Of course we need to configure it before, such as writing it in

app.js or writing it separately as store.js and in app .jsIntroduction (recommended):

// js/app.js// Vuex配置
...
const store = new Vuex.Store({  state: {domain:'http://test.example.com', //保存后台请求的地址，修改时方便（比方说从测试服改成正式服域名）
    userInfo: { //保存用户信息
      nick: null,      ulevel: null,      uid: null,      portrait: null
    }
  },  mutations: {//更新用户信息
    updateUserInfo(state, newUserInfo) {
      state.userInfo = newUserInfo;
    }
  }
})
...

Enter checksum to send login request

In order to prevent some unexpected characters and too frequent requests from being transmitted to the background, the front end must The user's input is verified and repeated requests are prevented. Of course, the legal characters of different websites are different. Here we only verify that

is empty and is illegal:

//component/Login.vue
<template><div class="login" id="login">
   ...<div class="log-email"><input type="text" placeholder="Email" :class="&#39;log-input&#39; + (account==&#39;&#39;?&#39; log-input-empty&#39;:&#39;&#39;)" v-model="account"><input type="password" placeholder="Password" :class="&#39;log-input&#39; + (password==&#39;&#39;?&#39; log-input-empty&#39;:&#39;&#39;)"  v-model="password"><a href="javascript:;" class="log-btn" @click="login">Login</a></div>
    ...</div></template><script>import Loading from &#39;./Loading.vue&#39;export default {  name: &#39;Login&#39;,
  data(){      return {          isLoging: false,          account: &#39;&#39;,          password: &#39;&#39;
      }
  },  components:{
    Loading
  },  methods:{      //登录逻辑
      login(){          if(this.account!=&#39;&#39; && this.password!=&#39;&#39;){              this.toLogin();
          }
      }

}</script>
...

Here

this.toLogin is the login request method. , when post the password is not sent directly to the backend, it is usually encrypted according to the rules set by the backend before being sent, such as Hash algorithm, the example uses double hash encryption , citing js/sha1.min.js, the rough implementation is as follows:

...      //登录请求
      toLogin(){          //一般要跟后端了解密码的加密规则          //这里例子用的哈希算法来自./js/sha1.min.js          let password_sha = hex_sha1(hex_sha1( this.password ));          //需要想后端发送的登录参数          let loginParam = {              account: this.account,
              password_sha
          }          //设置在登录状态          this.isLoging = true;          //请求后端          this.$http.post( 'example.com/login.php', {          param: loginParam).then((response) => {if(response.data.code == 1){              //如果登录成功则保存登录状态并设置有效期              let expireDays = 1000 * 60 * 60 * 24 * 15;              this.setCookie('session', response.data.session, expireDays);              //跳转              this.$router.push('/user_info'); 
            }
          }, (response) => {//Error
          });

...

This completes steps 3, 4, and 5. The last step is to log out.

Logout

When logging out, some need to request the backend and some do not. The key thing is to delete the saved login status:

<code class="javascript"><span class="hljs-comment">// component/UserInfo.vue
...
   logout(){      <span class="hljs-comment">//删除cookie并跳到登录页      <span class="hljs-keyword">this.isLogouting = <span class="hljs-literal">true;      <span class="hljs-comment">//请求后端，比如logout.php      <span class="hljs-comment">// this.$http.post(&#39;eaxmple.com/logout.php&#39;)...      <span class="hljs-comment">//成功后删除cookie      <span class="hljs-keyword">this.delCookie(<span class="hljs-string">&#39;session&#39;);      <span class="hljs-comment">//重置loding状态      <span class="hljs-keyword">this.isLogouting = <span class="hljs-literal">false;      <span class="hljs-comment">//跳转到登录页      <span class="hljs-keyword">this.$router.push(<span class="hljs-string">&#39;/login/&#39;);
    }
..</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code><br/>

The above is the detailed content of Vue.js writes an example of a SPA login page. For more information, please follow other related articles on the PHP Chinese website!