登錄模塊的使用與創建

一、如何實現登錄注冊

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){// 返回一個promisereturn 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) {// 重新賦值個userInfothis.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={};//注銷tokenwindow.localStorage.removeItem("token");}})}} 小白編寫，僅供參考

總結

以上是生活随笔為你收集整理的登录模块与token的使用和创建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。