在登录页面，当我们输入用户名与密码后，通过点击登录按钮，我们就会调用按钮绑定的登录方法，我们的登录接口会使用JWT工具返回一个token，我们需要引入js-cookie包，将token设置到cookie中去。

cookie.set('xx_token', response.data.data.token, { domain: 'localhost' })

然后在我们工具包下的request中设置一个拦截器，这个拦截器可以将每个request请求都拦截下来，通过判断cookie中是否存在token从而将token设置到headers中去，因为我们后面的接口会根据token得到用户的信息，但是需要使用request.getHeader("token")来获取，所以需要先设置到headers中去。

// request拦截器
service.interceptors.request.use(
  // 代表在每次发送请求中 都会用这个拦截器
  config => {
    // debugger 如果存在token则加入到headers中并返回 因为在后端jwt工具类中会通过token来获取信息String jwtToken = request.getHeader("token");
    if (cookie.get('lide_token')) {
      config.headers['token'] = cookie.get('lide_token')
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)

随后就调用根据token获取用户信息的接口，并且将获得的用户信息同样放到cookie中去，并且登录成功后跳转到我们的首页。

          loginApi.getLoginInfo()
            .then(response => {
              this.loginInfo = response.data.data.memberInfo
              // 获取返回的用户信息，放到cookie中
              cookie.set('lide_ucenter', this.loginInfo, { domain: 'localhost' })
              // 登陆成功回到首页
              this.$router.push({ path: '/' })
              // 将用户个人信息在首页展示 layouts/default中
            })

后面还需要将我们得到用户信息在首页中展示，信息可以从上面存入cookie中的loginInfo来获取。这个时候我们拿到的数据并不是json格式，而是字符串形式，区别就是在字符串是在json格式外面加上双引号"{'name':'xxx'}"  =>  {'name':'xxx'}，所以需要先将其转为json数据格式以便于我们得到这部分信息在首页展示。

    // 从cookie中获取用户信息
    showInfo() {
      var userStr = cookie.get('lide_ucenter')
      // 将userStr这个字符串转换成json数据格式
      if (userStr) {
        this.loginInfo = JSON.parse(userStr)
      }
    }

附上完整一点的代码

// login.vue 登录
    submitLoginUser() {
      loginApi.submitLogin(this.user)
        .then(response => {
          // 将登录得到的token设置到cookie中  三个参数 - 名称 数值 作用范围对应地址栏是否存在设定内容
          cookie.set('xxx_token', response.data.data.token, { domain: 'localhost' })
          // 创建拦截器判断cookie中是否有token 将拦截器写入 '@/utils/request' 因为每个api中的js都引入
          // 调用接口通过token得到用户个人信息用于首页显示
          // 在执行下面方法的时候 header中已经通过拦截器将token存进去了
          loginApi.getLoginInfo()
            .then(response => {
              this.loginInfo = response.data.data.memberInfo
              // 获取返回的用户信息，放到cookie中
              cookie.set('xxx_ucenter', JSON.stringify(this.loginInfo), { domain: 'localhost' })
              // 登陆成功回到首页
              this.$router.push({ path: '/' })
              // 将用户个人信息在首页展示 layouts/default中
            })
        })
    },

在首页中，我们可以进行一次判断，前面通过cookie获得用户信息后，通过v-if来判断得到的用户信息是否存在id值，从而进行不同的前端展示。

          <!-- / nav -->
          <ul class="h-r-login">
            <li v-if="!loginInfo.id" id="no-login">
              <a href="/login" title="登录">
                <em class="icon18 login-icon">&nbsp;</em>
                <span class="vam ml5">登录</span>
              </a>
              |
              <a href="/register" title="注册">
                <span class="vam ml5">注册</span>
              </a>
            </li>
            <li v-if="loginInfo.id" id="is-login-one" class="mr10">
              <a id="headerMsgCountId" href="#" title="消息">
                <em class="icon18 news-icon">&nbsp;</em>
              </a>
              <q class="red-point" style="display: none">&nbsp;</q>
            </li>
            <li v-if="loginInfo.id" id="is-login-two" class="h-r-user">
              <a href="/ucenter" title>
                <img
                  :src="loginInfo.avatar"
                  width="30"
                  height="30"
                  class="vam picImg"
                  alt
                >
                <span id="userName" class="vam disIb">{{ loginInfo.nickname }}</span>
              </a>
              <a href="javascript:void(0);" title="退出" class="ml5" @click="logout()">退出</a>
            </li>
            <!-- /未登录显示第1 li；登录后显示第2，3 li -->
          </ul>