Vue實(shí)現(xiàn)登錄保存token并校驗(yàn)實(shí)現(xiàn)保存登錄狀態(tài)的操作代碼
更新時(shí)間：2024年02月29日 10:16:55 作者：李長淵哦
這篇文章主要介紹了Vue實(shí)現(xiàn)登錄保存token并校驗(yàn)實(shí)現(xiàn)保存登錄狀態(tài),本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
一、登錄vue
<script>
import request from "@/axios/baseURL";
import router from "@/router";
// 接口數(shù)據(jù)初始化
const FORM_DATA = {
userName: "",
password: "",
};
export default {
data() {
return {
FORM_DATA,
};
},
created() {
console.log("登錄界面");
},
methods: {
login() {
request.post("/systemUser/login", this.FORM_DATA).then((res) => {
var code = res.data.code;
var message = res.data.message;
this.$message(message);
if (code == 0) {
localStorage.setItem("token", res.data.data.token);
router.push("/library");
}
console.log(res);
});
},
},
};
</script>二、路由index
// 導(dǎo)航守衛(wèi)
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token');
const outerPaths = ['/homePage']; // 當(dāng)前 path 不需要登錄也可以進(jìn)入系統(tǒng)，但是只能操作當(dāng)前頁面
if (!token && !outerPaths.includes(to.path)) {
next('/homePage');
} else {
// if (to.path == "/auth") {
// document.title = to.meta.title // 進(jìn)入這個(gè)頁面會(huì)被更改頁面標(biāo)題
// } else document.title = 'CPS流量變現(xiàn)后臺(tái)管理系統(tǒng)'
next();
}
});
到此這篇關(guān)于Vue實(shí)現(xiàn)登錄保存token并校驗(yàn)實(shí)現(xiàn)保存登錄狀態(tài)的文章就介紹到這了,更多相關(guān)Vue登錄保存token內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
高階組件HOC在React社區(qū)是非常常見的概念,但是在Vue社區(qū)中卻是很少人使用,但其實(shí)在一些特殊的場景使用他就可以很優(yōu)雅的解決一些問題,下面就跟隨小編一起來了解下吧2025-01-01
Vue中前后端使用WebSocket詳細(xì)代碼實(shí)例
websocket通信是很好玩的,也很有用的的通信方式,下面這篇文章主要給大家介紹了關(guān)于Vue中前后端使用WebSocket的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Django與Vue語法的沖突問題完美解決方法，本文給大家分享了兩種解決方法，需要的朋友參考下吧2017-12-12
這篇文章主要介紹了Vue.js特性Scoped Slots的淺析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
vue3 Element Plus中icon圖標(biāo)不顯示的解決方案
這篇文章主要介紹了vue3 Element Plus中icon圖標(biāo)不顯示的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3使用exceljs將excel文件轉(zhuǎn)化為html預(yù)覽最佳方案
在企業(yè)應(yīng)用中,我們時(shí)常會(huì)遇到需要上傳并展示 Excel 文件的需求,以實(shí)現(xiàn)文件內(nèi)容的在線預(yù)覽,經(jīng)過一番探索與嘗試,筆者最終借助 exceljs 這一庫成功實(shí)現(xiàn)了該功能,本文將以 Vue 3 為例,演示如何實(shí)現(xiàn)該功能,需要的朋友可以參考下2025-05-05
解決vue中菜單再次點(diǎn)擊內(nèi)容不刷新問題
當(dāng)elementUI中菜單打開后,再次點(diǎn)擊不會(huì)刷新的問題,導(dǎo)致菜單再次點(diǎn)擊不刷新的根本原因是頁面打開后,再次打開相同的頁面是不會(huì)刷新的,這應(yīng)該是框架的機(jī)制就是如此,小編整理了兩個(gè)比較不錯(cuò)的解決方法,需要的朋友可以參考下2023-08-08
Vue3 + MybatisPlus實(shí)現(xiàn)批量刪除功能(詳細(xì)代碼)
這篇文章主要介紹了Vue3 + MybatisPlus實(shí)現(xiàn)批量刪除功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了vue中ref和reactive的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue中computed及watch區(qū)別實(shí)例解析
這篇文章主要介紹了Vue中computed及watch區(qū)別實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08