登錄模塊與token的使用和創(chuàng)建方式
更新時間：2026年05月14日 14:59:47 作者：等....
本文講述了如何在Vue中實現(xiàn)登錄、獲取用戶信息、退出登錄以及Token的使用方法,文章詳細介紹了登錄流程、獲取用戶信息、退出登錄以及Token的作用和使用方法
一、如何實現(xiàn)登錄注冊
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頁面點擊跳轉到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頁面實現(xiàn)單擊登錄
<template>
<div>
//進行數(shù)據(jù)的雙向綁定
用戶名：<input type="text" v-model="user.userid" /><br>
密 碼：<input type="password" v-model="user.pwd" /><br>
//單擊時，調(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)用登錄接口，實現(xiàn)成功登錄
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() {
//調(diào)用獲取用戶信息的方法
GetUserInfo()
.then(res => {
if (res.data) {
// 重新賦值個userInfo
this.userInfo = res.data;
}
})
},
}
三、登陸后退出
1.在user里，當單擊退出鍵時調(diào)用logout()事件
2.在user里導入登陸接口文檔Login
3.在user頁面的methods里通過傳參的不同實現(xiàn)退出登陸
<template>
<div>
//單擊退出鍵時調(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是在客戶端頻繁向服務端請求數(shù)據(jù)，服務端頻繁的去數(shù)據(jù)庫查詢用戶名和密碼并進行對比，判斷用戶名和密碼正確與否，并作出相應提示，在這樣的背景下，Token便應運而生。
- Token的定義：Token是服務端生成的一串字符串，以作客戶端進行請求的一個令牌，當?shù)谝淮蔚卿浐螅掌魃梢粋€Token便將此Token返回給客戶端，以后客戶端只需帶上這個Token前來請求數(shù)據(jù)即可，無需再次帶上用戶名和密碼。
- 使用Token的目的：Token的目的是為了減輕服務器的壓力，減少頻繁的查詢數(shù)據(jù)庫，使服務器更加健壯。
2.使用
登陸時保存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";
// 當?shù)卿洺晒r候把用戶的token存起來
window.localStorage.setItem("token",res.data.token);
this.$router.replace(redirect);
}
})
}
}
在頁面獲取用戶信息
然后在utils的request里添加token請求頭
退出時，要清除token
<template>
<div>
//單擊退出鍵時調(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");
}
})
}
}
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue-cli3 $ is not defined錯誤問題及解決
這篇文章主要介紹了Vue-cli3 $ is not defined錯誤問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue項目markdown內(nèi)容預覽顯示優(yōu)化方式
在Vue項目中使用markdown-it組件預覽Markdown內(nèi)容時,通過安裝pnpm和markdown-it-github-markdown-css依賴,并重寫markdown部分樣式,實現(xiàn)了Markdown內(nèi)容的美化,在MarkdownPreview.vue組件中,通過變量renderedMarkdown接收并渲染Markdown內(nèi)容2025-10-10
這篇文章主要介紹了Vue+webpack項目基礎配置教程,需要的朋友可以參考下2018-02-02
iview實現(xiàn)動態(tài)表單和自定義驗證時間段重疊
這篇文章主要介紹了iview實現(xiàn)動態(tài)表單和自定義驗證時間段重疊，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了vue的面包屑導航組件，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了Vue3父子通訊方式及Vue3插槽的使用方法詳解,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了淺談vue的第一個commit分析，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要為大家詳細介紹了Vue.js仿 Select下拉框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了vue 項目軟鍵盤回車觸發(fā)搜索事件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue3?封裝?Element?Plus?Menu?無限級菜單組件功能的詳細代碼
本文分別使用?SFC（模板方式）和?tsx?方式對?Element?Plus?*el-menu*?組件進行二次封裝，實現(xiàn)配置化的菜單，有了配置化的菜單，后續(xù)便可以根據(jù)路由動態(tài)渲染菜單，對Vue3?無限級菜單組件相關知識感興趣的朋友一起看看吧2022-09-09