头条,第三天总结

用户登录,保存token值,

封装

export const getItem = (key) => {

const data = window.localStorage.getItem(key);

try {

return JSON.parse(data);

} catch (err) {

return data;

}

};

export const setItem = (key, value) => {

if (typeof value === "object") {

value = JSON.stringify(value);

}

window.localStorage.setItem(key, value);

};

export const removeItem = (key) => {

window.localStorage.removeItem(key);

};

在store.js中调用包,直接使用函数.

user:getitem(TOKEN)

显示用户登录页面,隐藏未登录的页面.

导入{mapState} from 'vuex'

使用store.js中的user.来判断用户是否登录.利用v-if.v-else

点击退出,利用vant的轻弹窗.提示.点击退出.不仅清除vuex中的缓存,还要清除本地的缓存.

获取用用户信息.渲染内容

发送请求的同时,也要验证用户是否登录.要传递一个token值.每次.发送请求都要.验证token.这样会代码冗余.利用axios的请求拦截.进行验证.如果没有就添加.在request,js中写

// 请求拦截器   <===========增加

request.interceptors.request.use(

  function (config) {

    // config ：本次请求的配置对象

    // config 里面有一个属性：headers

    const user = store.state.user;

    console.log(user);

    if (user && user.token) {

      config.headers.Authorization = `Bearer ${user.token}`;

    }

    return config;

  },

  function (error) {

    return Promise.reject(error);

  }

);

利用vant的点击事件中的回调函数.在then中添加this.$store.commit('TOKEN',''),调用保存本地存储中的函数,传入一个空值.就清空本地个vuex中的token

接下来是文章页面.写头部和tab标签.添加相应的样式.

发送请求.获取tab标签的name.进行渲染.

由于样式太多.考虑浏览器的运行.封装组件.单独渲染.

文章样式,同样封装组件.文章的图片不一样通过图片的个数来判断是否显示

 <van-cell center title="单元格" label="描述信息">

      <div slot="title">{{ obj.title }}</div>

      <div slot="label">

        <div v-if="obj.cover.type === 3">

          <span v-for="(ele, index) in obj.cover.images" :key="index">

            <van-image width="100" fit="cover" height="100" :src="ele" />

          </span>

        </div>

        <div>

          <span>雅座</span>

          <span>凉快地方</span>

          <span>第三方</span>

        </div>

      </div>

      <van-image

        v-if="obj.cover.type === 1"

        width="100"

        height="100"

        fit="cover"

        :src="obj.cover.images[0]"

      />

    </van-cell>