1、当用户访问题库页面是,此时检测用户是否有权限访问该智能题库的内容,若没有检测到用户是否登录,如果没有,则跳转到登录页面。登录完成之后,在localStorage中中存储该用户的用户名和密码,并且立刻跳转到智能题库的页面。
2、当用户点击退出,该用户直接删除。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue测试</title>
<script src="vue.js"></script>
<!--1、引入全局的VueRouter对象-->
<script src="vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
Vue.use(VueRouter);
var QuestionBank={
template:'' +
' <div>' +
' <h1>题库页面</h1>' +
' </div>',
};
var Home={
template:'' +
'<div>' +
' <h1>主页面</h1>' +
'</div>',
};
var Login={
data(){
return{
username:'',
password:'',
}
},
template:'' +
'<div>' +
' <h1>登录页面</h1>' +
' <input type="text" v-model="username">' +
' <input type="password" v-model="password">' +
' <input type="submit" value="登录" @click="loginHandler">' +
'</div>',
methods:{
loginHandler:function () {
// 保存用户名和密码到localStorage然后跳转至相应的路由
localStorage.setItem(
'user',
{name:this.username,password:this.password}
);
// 编程式导航
this.$router.push({name:'question_bank'})
}
}
};
var my_router=new VueRouter({
routes:[
{
path:'/home',
component:Home,
},
{
path:'/questionBank',
component:QuestionBank,
meta:{
// 表名访问该组件需要登录
auth:true,
},
name:'question_bank'
},
{path:'/login', component:Login,},
]
});
// 全局导航守卫
my_router.beforeEach((to, from, next) => {
// console.log('to>>>>>>>',to); // 去哪里
// console.log('from>>>>>',from); // 从哪里来
if(to.meta.auth){
// 访问的页面有权限限制,若未登录,则需要跳转至登录页面
// console.log('跳转至登录页面');
if(localStorage.getItem('user')){
console.log('已登录');
next()
}else {
next({path:'/login'})
}
}
else {
// 若不调用next,则页面会一直hang住
next()
}
});
var App={
template:'' +
' <div>' +
' <router-link to="/home"">首页</router-link>' +
' <router-link to="/questionBank"">题库</router-link>' +
' <router-link to="/login"">登录</router-link>' +
' <a href="#" @click="clear">退出</a>' +
'<keep-alive>' +
'<router-view></router-view>' +
'</keep-alive>' +
'</div>',
methods:{
clear(){
localStorage.removeItem('user')
}
}
};
new Vue({
el:'#app',
data:{
},
components:{
App
},
template:'<App/>',
router:my_router,
})
</script>
</html>