22、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);
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'
})
}
}
};
var router = new VueRouter({
routes: [
{
path: '/',
redirect: '/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();
});
new Vue({
el: '#app',
data() {
return {
}
},
router: router,
});
</script>
</html>