登录注册

登录注册组件-处理公用图片资源问题

assets文件夹是所有组件共用的资源。在css中运用@的话需要在前面加上~
如下background-image: url(~@/assets/images/icons.png);

注册业务

获取验证码 /api/user/passport/sendCode/phone GET

用户注册：/api/user/passport/register POST

参数
phone string Y
password string Y
code string Y
nickName string N

token（令牌）：用户唯一标识符
{
name: “1586937092148”
nickName: “1586937092148”
token: “141f8c8c43cb4d7b87d251684441e742”
userId: 49
}
vuex的数据不是持久化的，token需要存到localstorage

/api/user/passport/auth/getUserInfo 在header中添加token

登录后首页的用户信息展示

通过action userLogin将token存储到vuex中，非持久化，
刷新后用户信息没有了
需要持久化的存储 localstorage 自动登录

三个问题：

多个组件需要用户的登录信息，如果在每个组件中都发起请求的话，this.$store.dispatch('getUserInfo');
过于麻烦
用户已经登录了，就不能进入登录的路由了
没有登录的时候能进入购物车吗？

退出登录 /api/user/passport/logout GET

发请求通知服务器，服务器清除token，
清除用户数据

导航守卫

解决上面的三个问题
导航：表示路由正在发生改变，进行路由跳转
守卫：’紫禁城的护卫‘

全局守卫：（前置，后置）

eg：紫禁城【皇帝，太后，妃子】，紫禁城打吗守卫全都要排查
项目中发生了路由的变化，守卫就能监听到。

路由独享守卫：

eg：紫禁城【皇帝，太后，妃子】，是相应的【皇帝，太厚，妃子】的路上的守卫

组件内守卫

eg：皇帝的屋子，太后的屋子，门外

关于登录成功之后的导航守卫

    router.beforeEach(async (to, from, next) => {
  // to（目的地）:可以获取到你要跳转到的路由的信息
  // from（起始地）:可以获取到你从那个路由来的信息
  // next:放行函数 :放行next()，next(path)放行到指定的路由
  // 获取用户的token
  let token = store.state.login.token;
  let name = store.state.login.userInfo.name;
  if (token) {
    // 用户已经登录了不能去login
    if (to.path == '/login') {
      // console.log('去的是login，不放行')
      next('/home');
    }
    else {
      // 已经登录了，但是去的不是login，可能是【detail，search，home】
      if (name) {
        next();
      }
      else {
        // 没有用户信息，派发一个action来获得用户信息
        try {
          // 获取用户信息成功，放行
          let result = await store.dispatch('getUserInfo');
          // 放行
          next();
        } catch (error) {
          alert(error.message);
          // token过期了，虽然本地还有token，需要清除本地的token，再重新登录
          await store.dispatch('userLogout');
          next('/login');

        }
      }
      // console.log('已经登录了，但是去的不是login，放行')
      next();
    }
  }
  else {
    // 未登录，放行,暂时未处理完毕
    // console.log('未登录，放行')
    next();

  }
});