vue如何實(shí)現(xiàn)未登錄不能訪問(wèn)某些頁(yè)面
更新時(shí)間:2024年03月12日 10:05:54 作者:iiiilooaixuud
這篇文章主要介紹了vue如何實(shí)現(xiàn)未登錄不能訪問(wèn)某些頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue實(shí)現(xiàn)未登錄不能訪問(wèn)某些頁(yè)面
1.在需要攔截的頁(yè)面路由加上
meta: { requireAuth: true }
2.在main.js加上判斷即可
router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 需要權(quán)限 //判斷當(dāng)前是否擁有權(quán)限 if (getUserInfo().user_sub) { next(); } else { // 無(wú)權(quán),跳轉(zhuǎn)登錄 mgr.signinRedirect(); } } else { // 不需要權(quán)限,直接訪問(wèn) next(); } })
具體代碼:
vue某些頁(yè)面要登錄之后才能訪問(wèn),且登錄之后跳轉(zhuǎn)到之前的頁(yè)面
// router文件夾下的 index.js import Vue from "vue"; import Router from "vue-router"; import routes from "./routes"; // 配置的路徑 Vue.use(Router); const router = new Router({ routes, scrollBehavior // mode: 'history' }); const router = new Router({ routes, scrollBehavior // mode: 'history' }); router.beforeEach((to, from, next) => { if (to.matched.some(route => route.meta && route.meta.requiresAuth)) { if (!this.$storage.getStorage("userInfo")) { // 沒(méi)有登錄信息跳轉(zhuǎn)到登錄頁(yè) next({ path: "/login", query: { redirect: to.fullPath } // 'to.fullPath'跳轉(zhuǎn)到登錄之前頁(yè)面的路徑 }); } else { next(); } } else { next(); } }); export default router;
在登陸頁(yè)面( login.vue里 )
<template> <div class="login-container"> <van-form @submit="onSubmit"> <van-field v-model="username" label="用戶名" placeholder="用戶名" required /> <van-field v-model="password" type="password" label="密碼" placeholder="密碼" required /> <div style="margin: 40px 0 0 0;"> <van-button round block type="info" size="small" native-type="submit">提交</van-button> </div> </van-form> </div> </template> <script> import { webLogin } from '@/apis/apis' export default { data() { return { username: '', password: '', } }, created() { }, methods: { onSubmit() { if (!this.username) { this.$notify({ type: "danger", message: "請(qǐng)?zhí)顚懹脩裘? }); return; } else if (!this.password) { this.$notify({ type: "danger", message: "請(qǐng)?zhí)顚懨艽a" }); return; } let params = { username: this.username, password: this.password } webLogin(params).then(res => { if (res.code == 0) { this.$notify({ type: 'success', message: '恭喜,登錄成功!' }); // this.$router.push('/user'); this.$storage.setStorage('userInfo', res.data); setTimeout(() => { let path = '/user'; // '/user' 為個(gè)人中心頁(yè)面 if (this.$route.query.redirect) { path = this.$route.query.redirect // 跳到之前的頁(yè)面 } this.$router.push({ path: path }); }, 1000) } else { this.$notify(res.message) } }) } } } </script>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3頁(yè)面組件中怎么獲取上一個(gè)頁(yè)面的路由地址
這篇文章主要給大家介紹了關(guān)于vue3頁(yè)面組件中怎么獲取上一個(gè)頁(yè)面的路由地址的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02vue-auto-focus: 控制自動(dòng)聚焦行為的 vue 指令方法
今天小編就為大家分享一篇vue-auto-focus: 控制自動(dòng)聚焦行為的 vue 指令方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08Vue實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何溧陽(yáng)Vue實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-02-02解決vue中props對(duì)象中設(shè)置多個(gè)默認(rèn)值的問(wèn)題
props中設(shè)置了默認(rèn)值,但是獲取時(shí)(獲取父頁(yè)面沒(méi)有傳的屬性) 打印出來(lái)是undefined,所以本文給大家介紹了解決vue中props對(duì)象中設(shè)置多個(gè)默認(rèn)值的問(wèn)題,需要的朋友可以參考下2024-04-04vue系列之requireJs中引入vue-router的方法
這篇文章主要介紹了vue系列之requireJs中引入vue-router的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07