使用Vue搭建电商后台管理系统的注意点<登录页>

导航卫士

• 使用路由的导航卫士判断用户是否登录
  • 如果登录了，就放行
  • 如果没有登录，就跳到登录页

router.beforeEach((to,from,next) => {
    //to:  到哪去(路由对象)
    //from:  从哪来(路由对象)
    //next():放行的信号，如果调用next方法，那么组件就会展示出来，如果没有调用这个方法，组件就不会展示在页面中
    
    //这种情况是用户要去登录页，直接放行，显示登录组件即可
    if(to.path === '/login') {
        return next();
    }
    //获取服务器返回的token，根据token。服务器可以判断用户是否登录过
    const token = localStorage.getItem('token')
    //如果登录过，直接放行
    if(token){
        next()
    }else{
    //如果没有，跳到登录页,next的参数表示进入到哪个页面
    next('/login')    
    }
})