登錄模塊與token的使用和創(chuàng)建方式

更新時(shí)間：2026年05月14日 14:59:47 作者：等....

本文講述了如何在Vue中實(shí)現(xiàn)登錄、獲取用戶信息、退出登錄以及Token的使用方法,文章詳細(xì)介紹了登錄流程、獲取用戶信息、退出登錄以及Token的作用和使用方法

一、如何實(shí)現(xiàn)登錄注冊(cè)

1.在Vue里創(chuàng)建文件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頁面點(diǎn)擊跳轉(zhuǎn)到Login頁面

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

4.新建api文件，獲取登錄接口

import request from '../../utils/request.js'
import qs from 'qs'
 
 //請(qǐng)求登錄的文檔接口
function Login(data){
	// 返回一個(gè)promise
	return new Promise((resolve,reject)=>{
		request.post("/member/index_login.php",qs.stringify(data))
		.then(res=>{resolve(res)})
		.catch(err=>{reject(err)})
	})
	
}
//導(dǎo)出接口
export {Login};

5.在Login頁面實(shí)現(xiàn)單擊登錄

<template>
	<div>
	//進(jìn)行數(shù)據(jù)的雙向綁定
		用戶名：<input type="text" v-model="user.userid" /><br>
		密  碼：<input type="password" v-model="user.pwd" /><br>
		//單擊時(shí)，調(diào)用login()事件
		<button @click="login()">登錄</button>
	</div>
</template>

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

	export default {
		data() {
			return {
				user: {
				//接口文檔數(shù)據(jù)
					fmdo: "login",
					dopost: "login",
					userid: '',
					pwd: '',
				}
			}
		},
		methods: {
		//調(diào)用登錄接口，實(shí)現(xiàn)成功登錄
			login() {
				Login(this.user)
					.then(res => {
					//登錄成功是彈出提示框
						alert(res.data.msg);		
						//判斷是否登錄成功，status == 1是接口文檔里定義的，等于1是登錄成功
						if (res.data.status == 1) {
							//登錄成功跳轉(zhuǎn)到user頁面
							this.$router.replace("/user")
						}
					})
			}
		}
	}
</script>

二、登錄成功后獲取用戶信息

1.在api文檔里添加獲取用戶信息接口

function GetUserInfo(){
	// 登陸成功時(shí)獲取用戶信息的文檔接口
	return new Promise((resolve,reject)=>{
		request.get("/member/ajax_login.php")
		.then(res=>{resolve(res)})
		.catch(err=>{reject(err)})
	})
	
}
//導(dǎo)出接口
export {Login,GetUserInfo};

2.在user頁面獲取用戶信息

<template>
	<div>
	//登錄成功時(shí)顯示用戶信息
		<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() {
			//調(diào)用獲取用戶信息的方法
			GetUserInfo()
				.then(res => {
					if (res.data) {
						// 重新賦值個(gè)userInfo
						this.userInfo = res.data;
					}
				})
		},
}

三、登陸后退出

1.在user里，當(dāng)單擊退出鍵時(shí)調(diào)用logout()事件

2.在user里導(dǎo)入登陸接口文檔Login

3.在user頁面的methods里通過傳參的不同實(shí)現(xiàn)退出登陸

<template>
	<div>
			//單擊退出鍵時(shí)調(diào)用logout()事件
			<span @click="logout()">退出</span>
		</p>
	</div>
</template>Login
<script>
//引入api文件的GetUserInfo，Login方法
	import {GetUserInfo，Login} from "../../api/user/user.js"
	
	methods:{
			//退出方法
			logout(){
			//登陸和退出的接口一樣，傳入的參數(shù)不一樣
				Login({dopost:"exit"})
				.then(res=>{
					alert(res.data.msg);
					//如果狀態(tài)為1代表退出成功
					if(res.data.status==1){
						this.userInfo={};
						}
				})
			}
		}

四、token的使用

1.介紹

Token的引入：Token是在客戶端頻繁向服務(wù)端請(qǐng)求數(shù)據(jù)，服務(wù)端頻繁的去數(shù)據(jù)庫查詢用戶名和密碼并進(jìn)行對(duì)比，判斷用戶名和密碼正確與否，并作出相應(yīng)提示，在這樣的背景下，Token便應(yīng)運(yùn)而生。
Token的定義：Token是服務(wù)端生成的一串字符串，以作客戶端進(jìn)行請(qǐng)求的一個(gè)令牌，當(dāng)?shù)谝淮蔚卿浐?，服?wù)器生成一個(gè)Token便將此Token返回給客戶端，以后客戶端只需帶上這個(gè)Token前來請(qǐng)求數(shù)據(jù)即可，無需再次帶上用戶名和密碼。
使用Token的目的：Token的目的是為了減輕服務(wù)器的壓力，減少頻繁的查詢數(shù)據(jù)庫，使服務(wù)器更加健壯。

2.使用

登陸時(shí)保存token

methods: {
			login() {
				Login(this.user)
					.then(res => {
						alert(res.data.msg);
						// 判斷是否登陸成功
						if (res.data.status == 1) {
							//獲取查詢參數(shù)
							var redirect=this.$route.query.redirect||"/user";
							// 當(dāng)?shù)卿洺晒r(shí)候把用戶的token存起來
							window.localStorage.setItem("token",res.data.token);
							this.$router.replace(redirect);
						}
					})
			}
		}

在頁面獲取用戶信息

然后在utils的request里添加token請(qǐng)求頭

退出時(shí)，要清除token

<template>
	<div>
			//單擊退出鍵時(shí)調(diào)用logout()事件
			<span @click="logout()">退出</span>
		</p>
	</div>
</template>Login
<script>
//引入api文件的GetUserInfo，Login方法
	import {GetUserInfo，Login} from "../../api/user/user.js"
	
	methods:{
			//退出方法
			logout(){
			//登陸和退出的接口一樣，傳入的參數(shù)不一樣
				Login({dopost:"exit"})
				.then(res=>{
					alert(res.data.msg);
					//如果狀態(tài)為1代表退出成功
					if(res.data.status==1){
						this.userInfo={};
						//注銷token
						window.localStorage.removeItem("token");
						}
				})
			}
		}