电商项目-登录页面补充

之前完成了登录页面，登录过后要跳转到另个页面，主体的后台管理系统

1. 在login.vue里面添加：

//1.将登录成功之后的token，保存到客户端的sessionstorage中
               //   1.1项目中除了登录之外的其他API接口，必须在登录之后才能访问
               //   1.2token只应该在当前网站打开期间生效，所以将token 保存到sessionstorage中
               console.log(res);
               window.sessionStorage.setItem('token',res.data.token);
               //2.通过编程式导航跳转到后台主页，路由地址/home
               this.$router.push('/home');

2.在路由里面修改

const router = new Router({
  routes :[
    // 重定向
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    { path: '/home', component: Home }
  ]
})

3.这时候发现一个问题，单独访问/home也是可以的，原则上是不行的，这个时候需要在路由里面添加：

//挂载路由导航守卫
router.beforeEach((to,from,next) => {
  //to将要访问的路径
  //from从哪个路径跳转
  //next是一个函数，表示放行
  //   next（） 放行    next（’/login‘）强制跳转
  if(to.path == '/login') return next();
  //获取token
  const tokenstr = window.sessionStorage.getItem('token');
  if(!tokenstr) return next('/login');
  next();
})