路由中meta权限控制的使用

最新推荐文章于 2024-04-13 15:05:52 发布

张小囧！冲呀！

最新推荐文章于 2024-04-13 15:05:52 发布

阅读量2.7k

点赞数 2

分类专栏： vue 文章标签： javascript vue.js css3

本文链接：https://blog.csdn.net/zhangxiaojiong_zh/article/details/106460176

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

meta作为一个对象属性{}，被定义在routes的{}下，用于进行权限控制。如普通浏览者和已登陆用户可访问的数据信息不同;
场景：页面包含首页、博客、登陆三个router-link，若是浏览者点击博客后则对应登陆组件，若是已登陆页面点击博客后则对应到博客组件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>路由中meta权限控制 this.$router.push({})  router.beforeEach((to,from,next) => {})</title>
	</head>
	<body>
		<div id='app'>
			<router-link :to='{name:"home"}'>首页</router-link>
			<router-link :to='{name:"blog"}'>博客</router-link>
			<router-link :to='{name:"login"}'>登陆</router-link>
			<a href='javascript:void(0)'>退出</a>
			<router-view></router-view>
		</div>
		<script type='text/javascript' src='node_modules/vue/dist/vue.js'></script>
		<script type='text/javascript' src='node_modules/vue-router/dist/vue-router.js'></script>
		<script type='text/javascript'>
			let Home  = {
				template:`
					<div>
						我是Home
					</div>
				`
			}

			let Blog  = {
				template:`
					<div>
						我是Blog
					</div>
				`
			}

			let Login  = {
				data:function() {
					return {
						name:'',
						pwd:''
					}
				},
				template:`
					<div>
						<input type='text' v-model='name'/>
						<input type='password' v-model='pwd'/>
						<input type='button' value='登陆' @click='loginHandler'/>
					</div>
				`,
				methods:{
					// 登陆,点击登陆后跳转到博客页面
					loginHandler:function() {
						// 将用户名和密码保存
						localStorage.setItem('user',{name:this.name,pwd:this.pwd})
						// 跳转到博客页面（编程式导航），而router-link是申明式导航
						this.$router.push({
							name:'blog'
						})
					}
				}
			}


			let router = new VueRouter({
				routes:[
				// 重定向的使用
					{
						path:'/',
						redirect:'/home'
					},
					{
						name:'home',
						path:'/home',
						component:Home
					},
					{
						name:'blog',
						path:'/blog',
						component:Blog,
						// 给未来的路由做权限控制,对应key-value，其中key自起名字，在其它地方通过判断具体路由.meta.auth的值是true还是false,是true意味着用户访问该组件的时候需要登录，否则表明用户已登陆
						meta:{
							auth:true
						}
					},
					{
						name:'login',
						path:'/login',
						component:Login
					}
				]
			})


			/*
			第一次被执行在重定向的时候，此时from对应path为/的路由  而to对应path为/home的路由
	
			*/
			router.beforeEach((to, from, next) => {
				console.log(to)
				console.log(from)

				// 点击了博客链接，而且为true，那么需要跳转到登陆组件
				if(to.meta.auth) {
					// 判断此前是否有登陆，有登陆则继续到本应到的组件，没有登陆的话就进入login组件
					if(localStorage.getItem('user')) {
						next()
					}else {
						next({
							// 其中key-value可以添加多个，也可以设置name
							path:'/login'
						})
					}
				// 不是访问博客链接的话或者访问博客链接该值为false时，则直接进入下面的内容，如果不调用Next则页面会卡住
				}else {
					next()  
				}

			})

			let vm = new Vue({
				el:'#app',
				data:function() {
					return {

					}
				},
				router,
				template:``
			})
		</script>
	</body>
</html>

结果：
（1）无操作状态下页面
在这里插入图片描述
（2）点击“博客”后，因为路由发生了转化，在全局守卫router.beforeEach()的回调函数中进行判断，若需要判断登陆即auth:true且localStorage中无user对象，则定向到Login组件

（3）输入用户名和密码后，马上进入博客组件。同时查看localStorage中存储了user对象
在这里插入图片描述

（4）点击“首页”后再点击“博客”。因为用户已处于登陆状态，所以直接显示出Blog组件的内容

张小囧！冲呀！

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
路由中meta权限控制的使用

meta作为一个对象属性{}，被定义在routes的{}下，用于进行权限控制。如普通浏览者和已登陆用户可访问的数据信息不同;场景：页面包含首页、博客、登陆三个router-link，若是浏览者点击博客后则对应登陆组件，若是已登陆页面点击博客后则对应到博客组件。<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>路由中meta权限控制 this.$router.p.
复制链接

扫一扫