登录验证

首先我们确认一件事情，app端与服务器通信的时候，我们需要保证用户登录的唯一性。简单的来说，就是我们通过用户名和密码登录的时候要能够保存住用户的唯一信息，在web端开发的时候，我们通常使用session或者cookie来存在用户唯一值，然后进行判断。可是这种方法并不适用与移动端开发，移动端开发一般常用的是基于token的方式。

token是什么,如何实现，这个自行百度。

方框内的内容代表的意思是：
使用vue-router的导航钩子，在每次单页面打开之前，beforeEach函数执行，如果当前页面需要登录权限进入下一个流程，判断当前meta中是否包含token信息，如果包含代表是登录状态，如果不包含返回到登陆页。

登录配置.png

<template>
        <div class="padding" >

          <div>
            <img src="static/img/logo2.png" style="width:100%;height:250px">
          </div>

            <div class="padding-top">
            
              <von-input type="text" v-model="username" placeholder="请输入用户名" label="用户名"></von-input>
              <von-input type="password" v-model="password" placeholder="请输入密码" label="密码"></von-input>
     
                <md-button class="button button-positive  button-block" @click.native="login()">
                   登录
                </md-button>
            </div>
        </div>
</template>

<script>
import { RECORD_USERINFO } from "store/mutation-type.js";
import { accountLogin} from "service/getData";

export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  created() {
    if(localStorage.getItem('USER_TOKEN')!=''){
        this.$router.push({ path: "/home" });
    }
  },
  methods: {
    async login() {
      if(this.username == ""||this.password==""){
         $toast.show("用户名或密码错误", 1000);
      }
      else{
        let {State, Result,Msg} = await accountLogin(
                this.username,
                this.password
              );

              //登陆验证
              if (State==1) {
                let { Ticket } = Result;
                this.$store.commit(RECORD_USERINFO, { token:Ticket, user:Result });
                  $router.push({ path: "/home" });
              } else {
                $toast.show(Msg, 1000);
              }
      }
     
    }
  }
};
</script>