vue如何实现未登录不能访问某些页面
作者:iiiilooaixuud
这篇文章主要介绍了vue如何实现未登录不能访问某些页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue实现未登录不能访问某些页面
1.在需要拦截的页面路由加上
meta: { requireAuth: true }
2.在main.js加上判断即可
router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 需要权限 //判断当前是否拥有权限 if (getUserInfo().user_sub) { next(); } else { // 无权,跳转登录 mgr.signinRedirect(); } } else { // 不需要权限,直接访问 next(); } })
具体代码:
vue某些页面要登录之后才能访问,且登录之后跳转到之前的页面
// 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")) { // 没有登录信息跳转到登录页 next({ path: "/login", query: { redirect: to.fullPath } // 'to.fullPath'跳转到登录之前页面的路径 }); } 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: "请填写用户名" }); return; } else if (!this.password) { this.$notify({ type: "danger", message: "请填写密码" }); 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>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。