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