- 在需要登录验证的路由规则后面添加属性 meta:{requireAuth:true}:
路由配置文件中代码:
export default new Router({
mode: 'history', //去掉url中的#
routes: [
{path:'/',redirect:'/Home'},//重定向,默认显示主页
{path: '/Login',component: Login},
{path: '/Home',component: Home},
{path: '/Register',component: Register},
{path: '/Newnote/:id',component: Newnote,meta:{requireAuth:true}},
{path: '/Myblog',component: Myblog,meta:{requireAuth:true}},
{path: '/Articledetails/:id',component: Articledetails,meta:{requireAuth:true}} //文章详情路由接收文章id参数
],
linkActiveClass:'ivu-menu-item-active'
})
- 在main.js中配置全局路由守卫:
//配置全局路由守卫验证路由是否需要登录
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
if (JSON.parse(sessionStorage.getItem("islogin"))!=false && JSON.parse(sessionStorage.getItem("islogin"))!=null) { // 判断当前是否登录
next(); //如果登录了next()就表示允许跳转到要去的路由
}
else { //否则就跳转到下面的登录界面
next({
path: '/login',
query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
})
}
}
else { //如果该路由不需要登录验证就直接允许跳转
next();
}
});
这样一来,在未登录状态下,设置了登录验证的路由就不能跳转了。
其中:
router.beforeEach((to,from,next)=>{})
回调函数中的参数,
to:进入到哪个路由去,
from:从哪个路由离开,
next:函数,决定是否展示你要看到的路由页面。