Vue-meta做权限控制_vue meta的authority

作者：代码维护者 | 2024-02-04 13:51:49

踩

vue meta的authority

Vue-meta做权限控制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<router-link to='/home'>首页</router-link>
			<router-link to='/blog'>博客</router-link>
			<router-link to='/login'>登录</router-link>

			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript" src="js/vue.min.js">

	</script>
	<script type="text/javascript" src=".\node_modules\vue-router\dist\vue-router.js">

	</script>


	<script type="text/javascript">
		Vue.use(VueRouter); // 局部想要使用$router要先在全局挂载

		// 首页组件
		var Home = {
			template: `
				<div>
					我是首页
				</div>
			`,
		};
		// 博客组件
		var Blog = {
			template: `
				<div>我是博客</div>
			`,

		};
		// 登陆组件
		var Login = {
			data() {
				return {
					name: '',
					pwd: '',
				}
			},
			template: `
			<div>
				<input type="text" v-model='name'/>
				<input type="password" v-model='pwd'/>
				<input type="button" name="login" value='登录' @click='clickHandler'/>
			</div>
			`,
			methods: {
				clickHandler() {
					// 点击登录时我们将账户和密码保存在浏览器中
					console.log(this.name);
					console.log(this.pwd);
					localStorage.setItem('user', {
						name: this.name,
						pwd: this.pwd
					});
					// 登录成功后跳转到博客页面
					this.$router.push({
						name: 'blog' // 命名路由
					})
				}
			}
		};
		// 创建router对象
		var router = new VueRouter({
			// 配置路由对象
			routes: [
				// 路由匹配的规则
				{
					path: '/',
					redirect: '/home' // 重定向：当访问根/时跳转到home页面
				},
				{
					path: '/home',
					component: Home,

				},
				{
					path: '/blog',
					name: 'blog',
					component: Blog,
					// 给未来的路由做权限控制
					meta: {
						// 证明用户访问该组件的时候需要登录
						auth: true
					}

				},
				{
					path: '/login',
					component: Login,
				},

			]
		});

		// 全局守卫   守卫路由的切换  路由在切换的时候会调用该方法
		router.beforeEach((to, from, next) => {
			if (to.meta.auth){   // 判断要访问的组件是否需要登录
				if (localStorage.getItem('user')) {
					next()  // 判断我们保存用户信息的位置 如果有值就放行
				} else {
					next({
						path: '/login'  // 没有值九跳转到登录页
					});
				}
			}
			
			next(); // 必须调用next()方法  不调用会夯住
		});


		new Vue({
			el: '#app',
			data() {
				return {

				}
			},
			router: router,


		});
	</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/58869

查看

Vue-meta做权限控制_vue meta的authority

Vue-meta做权限控制