Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài)的操作代碼
更新時間:2024年02月29日 10:16:55 作者:李長淵哦
這篇文章主要介紹了Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài),本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
一、登錄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
// 導航守衛(wèi) router.beforeEach((to, from, next) => { const token = localStorage.getItem('token'); const outerPaths = ['/homePage']; // 當前 path 不需要登錄也可以進入系統(tǒng),但是只能操作當前頁面 if (!token && !outerPaths.includes(to.path)) { next('/homePage'); } else { // if (to.path == "/auth") { // document.title = to.meta.title // 進入這個頁面會被更改頁面標題 // } else document.title = 'CPS流量變現(xiàn)后臺管理系統(tǒng)' next(); } });
到此這篇關于Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài)的文章就介紹到這了,更多相關Vue登錄保存token內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue2.0中三種常用傳值方式(父傳子、子傳父、非父子組件傳值)
在Vue的框架開發(fā)的項目過程中,經(jīng)常會用到組件來管理不同的功能,有一些公共的組件會被提取出來。下面通過本文給大家介紹Vue開發(fā)中常用的三種傳值方式父傳子、子傳父、非父子組件傳值,需要的朋友參考下吧2018-08-08網(wǎng)站國際化多語言處理工具i18n安裝使用方法圖文詳解
國際化是設計軟件應用的過程中應用被使用與不同語言和地區(qū),下面這篇文章主要給大家介紹了關于網(wǎng)站國際化多語言處理工具i18n安裝使用方法的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-09-09使用Vue和Firebase實現(xiàn)后臺數(shù)據(jù)存儲的示例代碼
在現(xiàn)代 web 應用開發(fā)中,前端和后端的無縫協(xié)作至關重要,借助 Firebase 等云計算解決方案,前端開發(fā)者可以輕松實現(xiàn)數(shù)據(jù)存儲與實時更新,本文將為大家詳細介紹如何利用 Vue 3 的 Composition API 和 Firebase 實現(xiàn)后臺數(shù)據(jù)存儲,需要的朋友可以參考下2024-10-10