4 登陆认证模块配置

简介: 登录验证首先我们确认一件事情,app端与服务器通信的时候,我们需要保证用户登录的唯一性。简单的来说,就是我们通过用户名和密码登录的时候要能够保存住用户的唯一信息,在web端开发的时候,我们通常使用session或者cookie来存在用户唯一值,然后进行判断。

登录验证

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

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

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


img_0bb9982f103165cb5e9fb584a4c51279.png
登录配置.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>
目录
相关文章
|
6月前
|
数据安全/隐私保护 Windows
配置用户通过Telnet登录设备认证
配置用户通过Telnet登录设备认证
|
数据安全/隐私保护
认证服务:注册和登录
认证服务:注册和登录
|
小程序 API 数据库
小程序中实现用户的登录与注册
小程序中实现用户的登录与注册
小程序中实现用户的登录与注册
后台登录模块理解
后台登录模块理解
[导入]用户登录及验证用户是否登录的代码
用户登录及验证用户是否登录的代码文章来源:http://blog.csdn.net/jyk/archive/2006/08/15/1067382.aspx
693 0
|
数据安全/隐私保护
5、用户模块接口开发——登录、注销和注册
先看一下工程目录 1.png 创建UserController类 在主方法上加上这两个注释: @Controller @RequestMapping("/user/") 如: 2.
1405 0
|
数据安全/隐私保护 API 移动开发
登陆功能的实现
我不喜欢废话,上代码 /// /// 运行程序返回进程pid /// /// /// static public int RunProgram(string qqPath) ...
934 0
|
数据安全/隐私保护 安全