Vue實(shí)現(xiàn)登錄保存token并校驗(yàn)實(shí)現(xiàn)保存登錄狀態(tài)的操作代碼
更新時(shí)間：2024年02月29日 10:16:55 作者：李長(zhǎng)淵哦
這篇文章主要介紹了Vue實(shí)現(xiàn)登錄保存token并校驗(yàn)實(shí)現(xiàn)保存登錄狀態(tài),本文通過(guò)示例代碼給大家介紹的非常詳細(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)前頁(yè)面
if (!token && !outerPaths.includes(to.path)) {
next('/homePage');
} else {
// if (to.path == "/auth") {
// document.title = to.meta.title // 進(jìn)入這個(gè)頁(yè)面會(huì)被更改頁(yè)面標(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)文章
elementui實(shí)現(xiàn)預(yù)覽圖片組件二次封裝
這篇文章主要介紹了elementui實(shí)現(xiàn)預(yù)覽圖片組件二次封裝的方法 ，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
Vue 實(shí)例中使用$refs的注意事項(xiàng)
這篇文章主要介紹了Vue 實(shí)例中使用$refs的注意事項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2021-01-01
這篇文章主要介紹了Vue-組件自定義事件的綁定和解綁，文中有詳細(xì)的圖文實(shí)例，對(duì)學(xué)習(xí)或工作有一定的參考價(jià)值，需要的小伙伴可以閱讀下2023-05-05
前端Vue手機(jī)號(hào)校驗(yàn)以及后端Java手機(jī)號(hào)校驗(yàn)例子
接收一個(gè)輸入的手機(jī)號(hào),判斷輸入的手機(jī)號(hào)是否正確是一個(gè)很常見(jiàn)的功能,這篇文章主要給大家介紹了關(guān)于前端Vue手機(jī)號(hào)校驗(yàn)以及后端Java手機(jī)號(hào)校驗(yàn)的相關(guān)資料,需要的朋友可以參考下2023-11-11
vue實(shí)現(xiàn)登錄時(shí)圖形驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄時(shí)圖形驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue2.0中三種常用傳值方式(父?jìng)髯印⒆觽鞲?、非父子組件傳值)
在Vue的框架開(kāi)發(fā)的項(xiàng)目過(guò)程中，經(jīng)常會(huì)用到組件來(lái)管理不同的功能，有一些公共的組件會(huì)被提取出來(lái)。下面通過(guò)本文給大家介紹Vue開(kāi)發(fā)中常用的三種傳值方式父?jìng)髯?、子傳父、非父子組件傳值，需要的朋友參考下吧2018-08-08
網(wǎng)站國(guó)際化多語(yǔ)言處理工具i18n安裝使用方法圖文詳解
國(guó)際化是設(shè)計(jì)軟件應(yīng)用的過(guò)程中應(yīng)用被使用與不同語(yǔ)言和地區(qū),下面這篇文章主要給大家介紹了關(guān)于網(wǎng)站國(guó)際化多語(yǔ)言處理工具i18n安裝使用方法的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
下面小編就為大家分享一篇vue編譯打包本地查看index文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了深入了解Vue3模板編譯原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
使用Vue和Firebase實(shí)現(xiàn)后臺(tái)數(shù)據(jù)存儲(chǔ)的示例代碼
在現(xiàn)代 web 應(yīng)用開(kāi)發(fā)中,前端和后端的無(wú)縫協(xié)作至關(guān)重要,借助 Firebase 等云計(jì)算解決方案,前端開(kāi)發(fā)者可以輕松實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)與實(shí)時(shí)更新,本文將為大家詳細(xì)介紹如何利用 Vue 3 的 Composition API 和 Firebase 實(shí)現(xiàn)后臺(tái)數(shù)據(jù)存儲(chǔ),需要的朋友可以參考下2024-10-10