①先在我们的登录页面存储一个登录数据
// 登录成功时保存一个登录状态；
sessionStorage.setItem("flag", 1);
// 登录成功时保存一个登录状态；
sessionStorage.setItem("flag", 1);② 添加路由守卫方法一： 直接在路由中添加
const router = new VueRouter({ ... })
// 路由守卫
router.beforeEach((to, from, next) => {
// ...
})
const router = new VueRouter({ ... })
// 路由守卫
router.beforeEach((to, from, next) => {
// ...
})方法二：当我们使用的是export default 方法时可以在main.js中添加 router.beforeEach((to, from, next) => { }）方法。router.beforeEach((to, from, next) => { }）
const Recruit = resolve => require(['../components/common/main/index.vue'], resolve);
export default new Router({
routes: [
// 登录
{

path: path.login.path,

name: path.login.path,

component: Login,
},
.........
const Recruit = resolve => require(['../components/common/main/index.vue'], resolve);
export default new Router({
routes: [
// 登录
{

path: path.login.path,

name: path.login.path,

component: Login,
},
.........③ 在路由当中添加自定义字段requireAuth，判断当前路由是否需要登录。下图中1是设置多权限时的设置方法，下图中2是单权限设置方法④ 在路由守卫中添加我们自己的代码逻辑。
// 路由守卫
router.beforeEach((to,from,next)=>{

let flag = sessionStorage.getItem('flag ')

if(to.meta.requireAuth == true){ // 需要登录权限进入的路由

if(!flag){
// 获取不到登录信息

next({

path: '/login'

})

}else{
// 获取到登录信息，进行下一步

return next();

}
}else{
// 不需要登录权限的路由直接进行下一步

return next();
}
})
// 路由守卫
router.beforeEach((to,from,next)=>{

let flag = sessionStorage.getItem('flag ')

if(to.meta.requireAuth == true){ // 需要登录权限进入的路由

if(!flag){
// 获取不到登录信息

next({

path: '/login'

})

}else{
// 获取到登录信息，进行下一步

return next();

}
}else{
// 不需要登录权限的路由直接进行下一步

return next();
}
})总结总结总结