个人中心

• 画页面（css难点）
• 铺设数据

TabBar 做导航，引导整个父级路由

有四个子路由页面

• 登入/我的 -
• 视频
• 问答
• 主页

layout/index.vue

使用 Tabber 导航引导 子路由页面

• 根目录直接引导到 layout 的路由界面

• 配置好子路由页面

my/index.vue

个人中心主页面

• 上
• 中
• 下

上部分

banner 未登入时的登入按钮、登入时的个人信息

为登入的页面显示

---

需要写简单样式

.not-login{
    
}

按钮使用的是 div 标签

添加点击事件，路由返回

已登入用的页面显示

---

• 头像 名字显示 右侧编辑按钮
• 信息展示

中部分

• Gird 宫格
• 收藏和历史 button

引入 Gird 宫格 Item 后写样式

可以加上反馈

显示设置

登入于未登入的显示设置

• 退出登入按钮

  van-cell v-if="user"

  vuex 辅助函数拿到 user数据 判断是否空决定是否显示

• 整个登入button 和 用户信息 也根据拿到的 user 数据显示

• this.$router.back()

  返回路由的跳转页面，注意：此处是暂时使用

退出登入操作

使用 Diolog 组件 ，添加点击事件然后对其进行处理

//对登入时存储的 token 令牌进行情况即可
this.$store.commit('setUser',null)

铺设数据

• 封装方法

  base/v1_0/user

• 根据文档发送请求 ，拿到数据，铺设数据

用户信息的请求方法需要 token 令牌

直接在封装的请求这里，给上 headers 参数

return request({
    method:'GET',
    url:'v1_0/user',
    headers:{
        Authorizetion:'Bearer${store.state.user.token}'
    }
})

优化token

拦截器

这个拦截器有官方 aioxs 的示例

request.interceptors.request.use(function(config){
    const {user} = store.state
    if(user&&user.token){
       config.headers.Authorizatio = 'url'
    }
    return config
},function(error){
    return Promise.reject(error)
})