Vue實現登錄功能全套超詳細講解(含封裝axios)
更新時間：2023年10月27日 09:16:52 作者：前端老實人
這篇文章主要給大家介紹了關于Vue實現登錄功能(含封裝axios)的相關資料,Vue是現在前端最流行的框架之一,作為前端開發(fā)人員應該要熟練的掌握它,需要的朋友可以參考下
Vue項目中實現登錄大致思路：
1、第一次登錄的時候，前端調后端的登陸接口，發(fā)送用戶名和密碼
2、后端收到請求，驗證用戶名和密碼，驗證成功，就給前端返回一個token
3、前端拿到token，將token存儲到localStorage和vuex中，并跳轉路由頁面
4、前端每次跳轉路由，就判斷 localStroage 中有無 token ，沒有就跳轉到登錄頁面，有則跳轉到對應路由頁面
5、每次調后端接口，都要在請求頭中加token
6、后端判斷請求頭中有無token，有token，就拿到token并驗證token，驗證成功就返回數據，驗證失?。ɡ纾簍oken過期）就返回401，請求頭中沒有token也返回401
7、如果前端拿到狀態(tài)碼為401，就清除token信息并跳轉到登錄頁面
用到的關鍵文件
一、安裝插件
npm install axios; // 安裝axios npm install vuex // 安裝vuex
補充：
- 創(chuàng)建store是必須的！
- token一定要存在storage緩存中，否則刷新一下，store會重新被加載，token就沒了；
- 那存在store是不是多余了，這個也是為了數據統(tǒng)一管理吧，也是數據可視化，因為緩存中的數據代碼中是看不見的。（為了代碼更容易讓別人理解所以加上vuex，不加也不影響做登錄）
二、創(chuàng)建store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 用Vuex.Store對象用來記錄token
const store = new Vuex.Store({
state: {
// 存儲token
token:"",
userName:"" // 可選
},
getters: {
getToken(state){
return state.token || localStorage.getItem("token") || "";
}
},
mutations: {
// 修改token，并將token存入localStorage
setToken(state,token) {
state.token = token;
localStorage.setItem('token', token);
console.log('store、localstorage保存token成功！');
},
delToken(state) {
state.token = "";
localStorage.removeItem("token");
},
// 可選
setUserInfo(state, userName) {
state.userName = userName;
}
},
actions: {
// removeToken: (context) => {
// context.commit('setToken')
// }
},
});
export default store;
引用到main.js
import store from './store'
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
三、封裝axios
request.js文件用來封裝我們的axios
qs vue 插件
里面有用到qs，這里我門講解下他的作用：
get方法：我們通過定義一個get函數，get函數有兩個參數，第一個參數表示我們要請求的url地址，第二個參數是我們要攜帶的請求參數。get函數返回一個promise對象，當axios其請求成功時resolve服務器返回 值，請求失敗時reject錯誤值。最后通過export拋出get函數。
post方法：原理同get基本一樣，但是要注意的是，post方法必須要使用對提交從參數對象進行序列化的操作，所以這里我們通過node的qs模塊來序列化我們的參數。這個很重要，如果沒有序列化操作，后臺是拿不到你提交的數據的。這就是文章開頭我們import QS from ‘qs’;的原因。
簡單來說，qs 是一個增加了一些安全性的查詢字符串解析和序列化字符串的庫。
在項目中使用命令行工具輸入：npm install qs
安裝完成后在需要用到的組件中：import qs from 'qs’
具體使用中我查看了：qs.parse()和qs.stringify()
這兩種方法雖然都是序列化，但是還是有區(qū)別的。
qs.parse()是將URL解析成對象的形式
qs.stringify()是將對象 序列化成URL的形式，以&進行拼接
// 封裝axios
import axios from 'axios'
// 序列化
import QS from 'qs';
// vuex
import store from '../store/index'
//這一步的目的是判斷出當前是開發(fā)環(huán)境還是生成環(huán)境，方法不止一種，達到目的就行
// if(process.env.NODE_ENV=="development"){
// baseURL=''
// }else{
// baseURL=''
// }
// 使用自定義的配置文件發(fā)送請求
const instance = axios.create({
baseURL: '',
timeout: 80000,
headers: {
// 'Content-Type': 'application/json;charset=UTF-8',
// 'custome-header':'tianliangjiaoyu'
}
});
// post請求的時候，我們需要加上一個請求頭，所以可以在這里進行一個默認的設置，即設置post的請求頭為
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 添加請求攔截器
instance.interceptors.request.use(function (config) {
// 每次發(fā)送請求之前判斷vuex中是否存在token
// 如果存在，則統(tǒng)一在http請求的header都加上token，這樣后臺根據token判斷你的登錄情況
// 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態(tài)進行判斷
const token = store.getters.getToken;
if (token) {
// 已經登錄成功，統(tǒng)一添加token
config.headers.Authorization = `Bearer ${token}`
}
// token && (config.headers.Authorization = token);
return config;
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error);
});
// 這里說一下token，一般是在登錄完成之后，將用戶的token通過localStorage或者cookie存在本地，
// 然后用戶每次在進入頁面的時候（即在main.js中），會首先從本地存儲中讀取token，如果token存在說明用戶已經登陸過，
// 則更新vuex中的token狀態(tài)。然后，在每次請求接口的時候，都會在請求的header中攜帶token，
// 后臺人員就可以根據你攜帶的token來判斷你的登錄是否過期，如果沒有攜帶，則說明沒有登錄過。
// 添加響應攔截器
instance.interceptors.response.use(function (response) {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
}, function (error) {
// 對響應錯誤做點什么
if (error.response.status) {
switch (error.response.status) {
// 401: 未登錄
// 未登錄則跳轉登錄頁面，并攜帶當前頁面的路徑
// 在登錄成功后返回當前頁面，這一步需要在登錄頁操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token過期
// 登錄過期對用戶進行提示
// 清除本地token和清空vuex中token對象
// 跳轉登錄頁面
case 403:
this.$message({
message: '登錄過期，請重新登錄',
duration: 1000,
type: 'success'
});
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳轉登錄頁面，并將要瀏覽的頁面fullPath傳過去，登錄成功后跳轉需要訪問的頁面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404請求不存在
case 404:
this.$message({
message: '網絡請求不存在',
duration: 1500,
type: 'success'
});
break;
// 其他錯誤，直接拋出錯誤提示
default:
this.$message({
message: error.response.data.message,
duration: 1500,
type: 'success'
});
}
return Promise.reject(error.response);
}
});
/**
* get方法，對應get請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數]
*/
export function get(url, params) {
return new Promise((resolve, reject) => {
instance.get(url, {
params: params
})
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
/**
* post方法，對應post請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數]
*/
export function post(url, params, headers) {
return new Promise((resolve, reject) => {
instance.post(url, QS.stringify(params), headers)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}要注意的是，上面的this.$message方法，是我引入的element庫中的輕提示組件，你根據你的ui庫，對應使用你的一個提示組件。
這里說一下token，一般是在登錄完成之后，將用戶的token通過localStorage或者cookie存在本地，然后用戶每次在進入頁面的時候（即在main.js中），會首先從本地存儲中讀取token，如果token存在說明用戶已經登陸過，則更新vuex中的token狀態(tài)。然后，在每次請求接口的時候，都會在請求的header中攜帶token，后臺人員就可以根據你攜帶的token來判斷你的登錄是否過期，如果沒有攜帶，則說明沒有登錄過。
axios.get()方法和axios.post()在提交數據時參數的書寫方式還是有區(qū)別的。區(qū)別就是，get的第二個參數是一個{}，然后這個對象的params屬性值是一個參數對象的。而post的第二個參數就是一個參數對象。兩者略微的區(qū)別要留意哦！
api.js的作用
這里我們補充一個知識點：
api文件的作用就是接口統(tǒng)一管理
這里我們定義了一個postLogin方法，這個方法有一個參數p，p是我們請求接口時攜帶的參數對象。而后調用了我們封裝的post方法，post方法的第一個參數是我們的接口地址，第二個參數是postLogin的p參數，即請求接口時攜帶的參數對象。最后通過export統(tǒng)一導出apiFun對象
import {get,post} from './request'
let apiFun = null;
apiFun.postLogin = p => post('api/v1/users/my_address/address_edit_before', p)
export default apiFun;
然后在我們的mian.js文件中定義成全局變量，方便調用
import apiFun from "./network/api"; Vue.prototype.$apiFun = apiFun;//請求接口api
然后在我們的頁面中可以這樣調用我們的api接口：
// 調用api接口，并且提供了兩個參數
this.$apiFun.postLogin({
type: 0,
sort: 1
}).then(res => {
// 獲取數據成功后的其他操作
………………
}) api接口管理的一個好處就是，我們把api統(tǒng)一集中起來，如果后期需要修改接口，我們就直接在api.js中找到對應的修改就好了，而不用去每一個頁面查找我們的接口然后再修改會很麻煩.
四、路由攔截
import Vue from "vue"
import Router from "vue-router"
import Home from '../views/Home.vue'
import store from '../store/index'
Vue.use(Router)
let routes = [
{
path: '/',
name: 'Home',
component: Home,
// 重定向
redirect: '/publiccloud',
children: [
{
path: '/publiccloud',
name: '公有云用戶管理',
component: () => import('../views/publicCloud/PublicCloud.vue')
},
{
path: '/admin',
name: '管理員管理',
component: () => import('../views/admin/Admin.vue')
}
]
},
// 登陸頁面
{
path: "/Login",
name: "登錄頁面",
component: () => import('../views/login/Login.vue')
},
];
let router = new Router({
routes,
mode: 'history',
// 全局配置激活路由的class類名，處與活躍（動態(tài)）就會用上這個類名
linkActiveClass: 'active'
})
// 設置路由守衛(wèi)，在進頁面之前，判斷有token，才進入頁面，否則返回登錄頁面
if (storage.get("token")) {
store.commit("setToken", localStorage.getItem("token"));
}
router.beforeEach((to, from, next) => {
// 設置路由守衛(wèi)，在進頁面之前，判斷有token，才進入頁面
if (token) {
next('/')
} else {
// 沒有token就調用后端接口，跳轉地址
getAddress().then((res) => {
if (res.data.code === 200) {
location.href = res.data.data.redirectUri
}
})
}
});
export default router五、登錄頁面實際使用
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
let that = this;
// console.log('username',this.loginForm.username)
// 通過校驗規(guī)則后進入校驗用戶名密碼是否正確
// 沒有后臺接口可以自定義一個函數來模擬，替換postLogin
this.$apiFun.postLogin(this.loginForm.username, this.loginForm.password)
.then(res => {
console.log(res);
that.$store.commit("setToken", res.data.token);
that.$store.commit("setUserInfo", res.data.account);
this.$notify({
title: "登錄成功",
type: "success",
showClose: false,
duration: 1000
});
setTimeout(() => {
// 此時要判斷/login后面的參數redirect，若無參數，進入主頁；
this.$router.push("/index");
// 若有參數則參數為未有權限的那個路由，跳轉到那個路由
// this.$router.push(***); -- 具體要自己在這實現
}, 1000);
})
.catch(error => {
// 錯誤分為 status-請求錯誤 和 code-賬號密碼錯誤
this.$message.error(error);
console.log(error);
});
} else {
// 不符合前端校驗
this.$message.error('format error：'+error);
console.log('format error：',error);
return false;
}
});
}總結
到此這篇關于Vue實現登錄功能(含封裝axios)的文章就介紹到這了,更多相關Vue登錄功能內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了Vue3中v-model雙向綁定的正確用法和避坑指南,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2026-04-04
這篇文章主要介紹了iview實現動態(tài)表單和自定義驗證時間段重疊，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
本篇文章記錄仿寫一個el-tooltip組件細節(jié)，從而有助于大家更好理解餓了么ui對應組件具體工作細節(jié)，本文是elementui源碼學習仿寫系列的又一篇文章，后續(xù)空閑了會不斷更新并仿寫其他組件2023-07-07
這篇文章主要介紹了Vue3 Pinia如何修改全局狀態(tài)變量值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問題，就是本篇要探討的主要問題，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05
本文主要介紹了Vue出現彈出層時禁止底部頁面跟隨滑動，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了web項目開發(fā)中會出現2個Token原因的解析以及實現的示例代碼，有需要的同學可以借鑒參考下，希望可以有所幫助2021-09-09
在本篇文章里小編給大家整理的是一篇關于Vue中的常用指令及用法總結內容，對此有興趣的朋友們可以跟著學習下。2022-01-01
ruoyi-cloud通過bootstrap.yml文件設置多環(huán)境配置
本文主要介紹了在ruoyi-cloud框架中通過bootstrap.yml及對應環(huán)境配置文件實現多環(huán)境部署的方法,具有一定的參考價值,感興趣的可以了解一下2025-09-09
這篇文章主要給大家介紹了關于如何創(chuàng)建一個VUE項目的相關資料,創(chuàng)建vue項目有很多種方式,這里給大家介紹一種非常簡單的方法,需要的朋友可以參考下2023-08-08