Vue黑马头条移动端-Day1-"我的”页面

 

1、@click="$router.push('/login')"

这个的话就可以点击就可以跳转到登陆页面中去了

2、如果想要在grid-item里面使用iconfont的话可以通过

 <van-grid-item
        icon-prefix="toutiao"
        icon="shoucang"
        text="文字"
      />

3、一般在chrome里面调试找到的class，都要加上deep才可以添加样式了

 

使用 Vue 调试工具查看数据是否被映射进来

 

用户退出

用户退出的话，可以搞一个弹出窗让用户来确定“是否要进行退出”

就是用到了vant提供的一个组件 。基本用法：

Dialog.confirm({
  title: '标题',
  message: '弹窗内容',
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });

把用户的token作为参数传入到我们的服务器接口中的时候，

import store from '@/store/'

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

这里的

Authorization: `Bearer ${store.state.user.token}`

这里其实比较讲究，就是一个Bearer Token的格式

 

 

使用请求拦截器统一添加 Token

意义就是由于程序里面要经常的把token传给接口的，就不能每次都要获取token，然后再作为参数，如果可以的话

使用请求拦截器统一添加（推荐，更方便）

 

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

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

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

const request = axios.create({
  baseURL: 'http://ttapi.research.itcast.cn/' // 基础路径
})

// 请求拦截器
// Add a request interceptor
request.interceptors.request.use(function (config) {
  // Do something before request is sent
  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