2021-08-31 黑马移动端头条项目-day03

目录

”我的“模块

一、页面布局

        1.1 未登录头部状态

        1.2 已登录头部

        1.3 宫格导航

        1.4 单元格导航

二、处理已登录和未登录的页面展示

三、用户退出

四、展示登录用户信息

五、优化设置Token

---

”我的“模块

一、页面布局

        1.1 未登录头部状态

        1.2 已登录头部

        1.3 宫格导航

<van-grid :column-num="2">
      <!-- 使用组件提供的图标 -->
      <!-- <van-grid-item icon="star-o" text="文字" />
      <van-grid-item icon="browsing-history-o" text="文字" /> -->
      <!-- 自定义图标 -->
      <van-grid-item text="文字" icon-prefix="toutiao" icon="favorite" />
      <van-grid-item text="文字" icon-prefix="toutiao" icon="lishi" />
</van-grid>

        1.4 单元格导航

        vant中Cell单元格--> 页面导航 

<!-- 单元格导航 -->
<van-cell title="消息通知" is-link to="/" />
<van-cell title="小智同学" is-link to="/" />

二、处理已登录和未登录的页面展示

已登录  v-if

<!-- 登录 -->
    <van-cell-group v-if="user" class="my-info">
      <van-cell
        title="单元格"
        value="内容"
        center
        class="base-info"
        :border="false"
      >
        <van-image
          class="avatar"
          slot="icon"
          round
          fit="cover"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
        <div class="name" slot="title">xx</div>
        <van-button class="update-btn" size="small" round>编辑资料</van-button>
      </van-cell>
      <van-grid class="data-info" :border="false">
        <van-grid-item class="data-info-item">
          <div class="text-wrap" slot="text">
            <div class="count">123</div>
            <div class="text">头条</div>
          </div>
        </van-grid-item>
        <van-grid-item class="data-info-item">
          <div class="text-wrap" slot="text">
            <div class="count">123</div>
            <div class="text">关注</div>
          </div>
        </van-grid-item>
        <van-grid-item class="data-info-item">
          <div class="text-wrap" slot="text">
            <div class="count">123</div>
            <div class="text">粉丝</div>
          </div>
        </van-grid-item>
        <van-grid-item class="data-info-item">
          <div class="text-wrap" slot="text">
            <div class="count">123</div>
            <div class="text">获赞</div>
          </div>
        </van-grid-item>
      </van-grid>
    </van-cell-group>

未登录  v-else

<!-- 未登录 -->
    <div v-else class="not-login">
      <div @click="$router.push('./login')">
        <img class="mobile" src="./mobile.png" alt="" />
      </div>
      <div class="text">登录/注册</div>
</div>

三、用户退出

给”退出登录“绑定点击事件

van-cell
      v-if="user"
      class="toLogout-cell"
      title="退出登录"
      @click="onLogout"
    />

编写退出方法：用户退出时清除用户登录状态

// 用户退出
    onLogout() {
      this.$dialog
        .confirm({
          title: "退出提示",
          message: "确认退出吗？"
        })
        .then(() => {
          // 清除用户登录状态
          this.$store.commit("setUser", null);
        });
    }

四、展示登录用户信息

接口配置

1.接口：http://ttapi.research.itcast.cn/app/v1_0/authorizations

2.GET方式 url: '/app/v1_0/user',

登录联调接【该接口需要授权，后期采用拦截器配置】

1.配置登录模块接口 api/user.js

字段名称： Authorization

字段值： Bearer token，注意Bearer和token之间有一个空格

// 获取用户信息
export const getCurrentUser = () => {
  return request({
    method: 'GET',
    url: '/app/v1_0/user',
    headers: {
      Authorization: `Bearer ${store.state.user.token}`
    }
  })
}

2.该组件页请求接口

• 引入模块 import { getCurrentUser } from "@/api/user";
• 方法  await getCurrentUser()

五、优化设置Token

* 使用请求拦截器统一设置token

项目中的接口除了登录之外大多数都需要提供 token才有访问权限，通过第四大部分的接口文档看出，后端接口要求我们将token放到请求头Header中并以下面的格式发送：

 方式一：在每次请求的时候手动添加（麻烦）

axios({
    method: '',
    url: '',
    headers: {
        Authorization: 'Bearer token'
    }
})

因此在第四大部分中请求获取用户信息的接口中不需要再提供 Authorization，同时删除import store from '@/store' 这一行，将import store from '@/store'放到utils/request.js中

方式二：统一请求拦截器，在utils/request.js中配置：

// 请求模块
import axios from 'axios'

// 在非组件模块中获取store必须通过这种方式
// 这里单独加载 store,和在组件中this.$store一个东西
import store from '@/store'

const request = axios.create({
  baseURL: 'http://ttapi.research.itcast.cn/' // 接口的基准路径
})
// 请求拦截器
request.interceptors.request.use(
  function (config) {
    const { user } = store.state
    // 如果用户已登录，统一给接口设置token
    if (user) {
      config.headers.Authorization = `Bearer ${user.token}`
    }
    // 处理完之后一定要把config返回，否则请求就会停在这里
    return config
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error)
  }
)
// 响应拦截器

export default request