(精華2020年5月8日更新) vue教程篇 vue-router路由的許可權控制

2b勿擾發表於2020-05-08
Vue路由
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>許可權控制- filters</title>
	<style>
		.active {
			font-size: 20px;
			color: #ff7300;
			text-decoration: none;

		}

		.main-menu a {
			display: inline-block;
			margin-right: 10px;
		}
	</style>
	<script src="js/vue.js"></script>
	<script src="js/vue-router.js"></script>
</head>

<body>
	<div id="itapp">
		<div class="main-menu">
			<!-- <router-link to="/home">主頁</router-link>
            <router-link to="/user">使用者</router-link>
            <router-link to="/finance">財務資訊</router-link> -->

			<!-- 寫成動態的 -->
			<!-- $router.options.routes  可以從計算器屬性-->
			<!-- {{$router.options.routes}} -->
			<router-link v-for="(item,index) in $router.options.routes" :key="index" :to="item.path">{{item.meta.title}}
			</router-link>
			<!-- <router-link v-for="(item,index) in getMyRoutes" :key="index" :to="item.path">{{item.meta.title}}</router-link> -->

		</div>
		<div>
			<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
				<router-view></router-view>
			</transition>
		</div>

		<hr>
		<button @click="push">新增路由</button>
		<button @click="replace">替換路由</button>
	</div>

	<template id="user">
		<div>
			<h3>使用者資訊</h3>
			<ul>
				<router-link to="/user/login?name=tom&pwd=123" tag="li">使用者登陸</router-link>
				<router-link to="/user/regist/alice/456" tag="li">使用者註冊</router-link>
				<router-link to="/user/info" tag="li">使用者註冊</router-link>
			</ul>
			<router-view></router-view>
		</div>
	</template>

	<script>
		var Home = {
			template: '<h3>我是主頁</h3>'
		}
		var User = {
			template: '#user'
		}
		var Login = {
			template: '<h4>使用者登陸。。。獲取引數：{{$route.query}},{{$route.path}}</h4>'
		}
		var Regist = {
			template: '<h4>使用者註冊。。。獲取引數：{{$route.params}},{{$route.path}}</h4>'
		}
		var Finance = {
			template: '<h4>財務資訊</h4>'
		}

		var routes = [{
				path: '/home',
				component: Home,
				meta: {
					title: '首頁',
					roles: ['admin', 'guest']
				}
			},
			{
				path: '/user',
				component: User,
				meta: {
					title: '使用者',
					roles: ['admin', 'guest']
				},
				children: [{
						path: 'login',
						component: Login
					},
					{
						//動態路由匹配  // 動態路徑引數 以冒號開頭
						path: 'regist/:username/:password',
						component: Regist
					}

				]
			},
			{
				path: '/finance',
				component: Finance,
				meta: {
					title: '財務資訊',
					roles: ['admin']
				}
			},
			{
				path: '*',
				redirect: '/home',
				hidden: true
			}
		]

		//過濾需要顯示的路由 , 許可權控制
		//第一種方式， 通過設定 是否有許可權 roles引數來過濾 guest為遊客 
		//假設登入成功， 你知道使用者的角色，許可權
		routes = routes.filter((option, index) => {
			return !option.hidden && (option.meta && option.meta.roles.includes('guest'));
		})

		const routerAll = new VueRouter({
			routes, //簡寫，相當於routes:routes
			linkActiveClass: 'active', //更新活動連結的class類名,預設的啟用的 class
			linkExactActiveClass: 'active-extact', //精確啟用的 class
			mode: "hash", //預設
		});

		new Vue({
			el: '#itapp',
			router: routerAll, //注入路由
			// test:routerAll,   //this.$options.test
			computed: {
				getMyRoutes() {
					var thisData = this.$router.options.routes;
					var test1 = thisData.filter((option) => {
						return option.meta
					})
					return test1;
				}
			},
			methods: {
				push() {
					// this.$options.test.push({path:'home'})
					this.$router.push({
						path: 'home'
					}); //新增路由，切換路由
					// routerAll.push({path:'home'}); //新增路由，切換路由

					// 獲取引數 
					// this.$route.query

				},
				replace() {
					routerAll.replace({
						path: 'user'
					}); //替換路由，沒有歷史記錄
				}
			}
		});
	</script>
</body>

</html>

相關文章