22、Vue-meta做权限控制

22、Vue-meta做权限控制


<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: `
				
我是首页
`
, }; // 博客组件 var Blog = { template: `
我是博客
`
, }; // 登陆组件 var Login = { data() { return { name: '', pwd: '', } }, template: `
`
, 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>

你可能感兴趣的:(Vue学习基础)