项目第二天

1 TabBar 处理

• 父路由：一个空页面，包含一个 tabbar，中间留子路由出口
• 子路由：首页 问答 视频 我的

layout 配置一级路由

{
  path: '/',
  component: () => import('@/views/layout')
}

2创建对应页面的vue文件

3根据user判断不同的状态

<!-- 已登录头部 -->
<div v-if="user" class="header user-info">   
    ...
</div>
<!-- /已登录头部 -->

<!-- 未登录头部 -->
<div v-else class="header not-login">  
    ....
</div>
<!-- /未登录头部 -->

<!-- 退出 -->
 <van-cell
    v-if="user"  
    class="logout-cell"
    clickable
    title="退出登录"
/>
<!-- /退出 -->

4.用户退出

只需要点击的时候将仓库中的user数据删除即可

onLogout () {
  // 退出提示
  // 在组件中需要使用 this.$dialog 来调用弹框组件
  this.$dialog.confirm({
    title: '确认退出吗？'
  }).then(() => {
    // on confirm
    // 确认退出：清除登录状态（容器中的 user + 本地存储中的 user）
    this.$store.commit('setUser', null)
  }).catch(() => {
    // on cancel
    console.log('取消执行这里')
  })
}

5.展示用户信息

步骤：

这是一个页面一打开请求数据的过程。我们基本可以把逻辑梳理为以步骤，可以在其他功能模块中同样是使用

• 第1步： api目录下面文件里面封装请求方法
• 第2步：data里面定义变量用于存储数据
• 第3步：methods里定义获取数据方法
  • 3.1 页面里面导入api目录里封装请求方法
  • 3.2 methods方法里面调用方法发送请求
  • 3.3 请求错误处理
  • 3.4 请求成功赋值data里面变量
• 第4步：created里面调用这个方法
• 第5步： 渲染数据

6.优化token

在 src/utils/request.js 中添加拦截器统一设置 token：

// 请求拦截器  
request.interceptors.request.use(function (config) {
  // config ：本次请求的配置对象
  // config 里面有一个属性：headers
  const { user } = store.state
  if (user && user.token) {
    config.headers.Authorization = `Bearer ${user.token}`
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

将api/user.js 里面的方法进行重构测试

export const getUserInfo = () => {
  return request({
    method: 'GET',
    url: '/v1_0/user',
    // 发送请求头数据           
    /*  
    headers: {
      // 注意：该接口需要授权才能访问
      //       token的数据格式：Bearer token数据，注意 Bearer 后面有个空格
      Authorization: `Bearer ${store.state.user.token}`
    }
    */
  })
}