vue如何實現(xiàn)未登錄不能訪問某些頁面
更新時間:2024年03月12日 10:05:54 作者:iiiilooaixuud
這篇文章主要介紹了vue如何實現(xiàn)未登錄不能訪問某些頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue實現(xiàn)未登錄不能訪問某些頁面
1.在需要攔截的頁面路由加上
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 { // 無權(quán),跳轉(zhuǎn)登錄
mgr.signinRedirect();
}
} else { // 不需要權(quán)限,直接訪問
next();
}
})具體代碼:


vue某些頁面要登錄之后才能訪問,且登錄之后跳轉(zhuǎn)到之前的頁面
// 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")) { // 沒有登錄信息跳轉(zhuǎn)到登錄頁
next({
path: "/login",
query: { redirect: to.fullPath } // 'to.fullPath'跳轉(zhuǎn)到登錄之前頁面的路徑
});
} else {
next();
}
} else {
next();
}
});
export default router;
在登陸頁面( 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: "請?zhí)顚懹脩裘? });
return;
} else if (!this.password) {
this.$notify({ type: "danger", message: "請?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' 為個人中心頁面
if (this.$route.query.redirect) {
path = this.$route.query.redirect // 跳到之前的頁面
}
this.$router.push({
path: path
});
}, 1000)
} else {
this.$notify(res.message)
}
})
}
}
}
</script>

總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-auto-focus: 控制自動聚焦行為的 vue 指令方法
今天小編就為大家分享一篇vue-auto-focus: 控制自動聚焦行為的 vue 指令方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue實現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何溧陽Vue實現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-02-02
解決vue中props對象中設(shè)置多個默認(rèn)值的問題
props中設(shè)置了默認(rèn)值,但是獲取時(獲取父頁面沒有傳的屬性) 打印出來是undefined,所以本文給大家介紹了解決vue中props對象中設(shè)置多個默認(rèn)值的問題,需要的朋友可以參考下2024-04-04
vue系列之requireJs中引入vue-router的方法
這篇文章主要介紹了vue系列之requireJs中引入vue-router的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07

