登录模块与token的使用和创建

登录模块的使用与创建

一、如何实现登录注册

1.在Vue里创建文件Login.vue和user.vue

2.在router里配置路由

    {
		path: '/user',
		name: 'User',
		component: () => import('../views/user/User.vue'),
		meta: {
			keep: true
		}
	},
	{
		path: '/login',
		name: 'Login',
		meta: {
			nofoot: true
		},
		component: () => import('../views/user/Login.vue')
	},

3.在user页面点击跳转到Login页面

<template>
	<div>
		<router-link to="/login">登录</router-link>
	</div>
</template>

4.新建api文件，获取登录接口

import request from '../../utils/request.js'
import qs from 'qs'
 
 //请求登录的文档接口
function Login(data){
	// 返回一个promise
	return new Promise((resolve,reject)=>{
		request.post("/member/index_login.php",qs.stringify(data))
		.then(res=>{resolve(res)})
		.catch(err=>{reject(err)})
	})
	
}
//导出接口
export {Login};

5.在Login页面实现单击登录

<template>
	<div>
	//进行数据的双向绑定
		用户名：<input type="text" v-model="user.userid" /><br>
		密  码：<input type="password" v-model="user.pwd" /><br>
		//单击时，调用login()事件
		<button @click="login()">登录</button>
	</div>
</template>

<script>
//引入api文件
	import {Login} from '@api/user/user.js'

	export default {
		data() {
			return {
				user: {
				//接口文档数据
					fmdo: "login",
					dopost: "login",
					userid: '',
					pwd: '',
				}
			}
		},
		methods: {
		//调用登录接口，实现成功登录
			login() {
				Login(this.user)
					.then(res => {
					//登录成功是弹出提示框
						alert(res.data.msg);		
						//判断是否登录成功，status == 1是接口文档里定义的，等于1是登录成功
						if (res.data.status == 1) {
							//登录成功跳转到user页面
							this.$router.replace("/user")
						}
					})
			}
		}
	}
</script>

二、登录成功后获取用户信息

1.在api文档里添加获取用户信息接口

function GetUserInfo(){
	// 登陆成功时获取用户信息的文档接口
	return new Promise((resolve,reject)=>{
		request.get("/member/ajax_login.php")
		.then(res=>{resolve(res)})
		.catch(err=>{reject(err)})
	})
	
}
//导出接口
export {Login,GetUserInfo};

2.在user页面获取用户信息

<template>
	<div>
	//登录成功时显示用户信息
		<p v-if="userInfo.M_LoginID">
			<span>{{userInfo.M_LoginID}}:</span>
			<span>{{userInfo.M_Scores}}:</span>
			<span>退出</span>
		</p>
		//否则显示登陆
		<p v-else><router-link to="/login">登录</router-link></p>
	</div>
</template>
<script>
//引入api文件的GetUserInfo方法
	import {GetUserInfo} from "../../api/user/user.js"
	export default{
		data(){
			return{
			//用户信息
				userInfo:{}
			}
		},
		created() {
			//调用获取用户信息的方法
			GetUserInfo()
				.then(res => {
					if (res.data) {
						// 重新赋值个userInfo
						this.userInfo = res.data;
					}
				})
		},
}

三、登陆后退出

1.在user里，当单击退出键时调用logout()事件
2.在user里导入登陆接口文档Login
3.在user页面的methods里通过传参的不同实现退出登陆

<template>
	<div>
			//单击退出键时调用logout()事件
			<span @click="logout()">退出</span>
		</p>
	</div>
</template>Login
<script>
//引入api文件的GetUserInfo，Login方法
	import {GetUserInfo，Login} from "../../api/user/user.js"
	
	methods:{
			//退出方法
			logout(){
			//登陆和退出的接口一样，传入的参数不一样
				Login({dopost:"exit"})
				.then(res=>{
					alert(res.data.msg);
					//如果状态为1代表退出成功
					if(res.data.status==1){
						this.userInfo={};
						}
				})
			}
		}

四、token的使用

1.介绍
1、Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。

2、Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。

3、使用Token的目的：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。
2.使用
登陆时保存token

methods: {
			login() {
				Login(this.user)
					.then(res => {
						alert(res.data.msg);
						// 判断是否登陆成功
						if (res.data.status == 1) {
							//获取查询参数
							var redirect=this.$route.query.redirect||"/user";
							// 当登录成功时候把用户的token存起来
							window.localStorage.setItem("token",res.data.token);
							this.$router.replace(redirect);
						}
					})
			}
		}

在页面获取用户信息

然后在utils的request里添加token请求头

退出时，要清除token

<template>
	<div>
			//单击退出键时调用logout()事件
			<span @click="logout()">退出</span>
		</p>
	</div>
</template>Login
<script>
//引入api文件的GetUserInfo，Login方法
	import {GetUserInfo，Login} from "../../api/user/user.js"
	
	methods:{
			//退出方法
			logout(){
			//登陆和退出的接口一样，传入的参数不一样
				Login({dopost:"exit"})
				.then(res=>{
					alert(res.data.msg);
					//如果状态为1代表退出成功
					if(res.data.status==1){
						this.userInfo={};
						//注销token
						window.localStorage.removeItem("token");
						}
				})
			}
		}

仅供参考