面经 H5 端 - Vant（上） ​

3.x
> 2.x

<template>
  <div class="layout-page">
    <router-view></router-view>

    <van-tabbar route>
      <van-tabbar-item to="/article" icon="notes-o">
        面经
      </van-tabbar-item>
      <van-tabbar-item to="/collect" icon="star-o">
        收藏
      </van-tabbar-item>
      <van-tabbar-item to="/like" icon="like-o">
        喜欢
      </van-tabbar-item>
      <van-tabbar-item to="/user" icon="user-o">
        我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

import Vue from "vue";
import { NavBar, Form, Field } from "vant";
Vue.use(NavBar);
Vue.use(Form);
Vue.use(Field);

<template>
  <div class="login-page">
    <!-- 导航栏部分 -->
    <van-nav-bar title="面经登录" />

    <!-- 一旦form表单提交了，就会触发submit，可以在submit事件中
         根据拿到的表单提交信息，发送axios请求
     -->
    <van-form @submit="onSubmit">
      <!-- 输入框组件 -->
      <!-- \w 字母数字_   \d 数字0-9 -->
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[
          { required: true, message: '请填写用户名' },
          { pattern: /^\w{5,}$/, message: '用户名至少包含5个字符' }
        ]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[
          { required: true, message: '请填写密码' },
          { pattern: /^\w{6,}$/, message: '密码至少包含6个字符' }
        ]"
      />
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'login-page',
  data () {
    return {
      username: 'zhousg',
      password: '123456'
    }
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    }
  }
}
</script>

<style lang="less" scoped>
.link {
  color: #069;
  font-size: 12px;
  padding-right: 20px;
  float: right;
}
</style>

<template>
  <div class="login-page">
    <van-nav-bar title="面经注册" />

    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button block type="primary" native-type="submit"
          >注册</van-button
        >
      </div>
    </van-form>
    <router-link class="link" to="/login">有账号，去登录</router-link>
  </div>
</template>

<script>
export default {
  name: 'register-page',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    }
  }
}
</script>

<style lang="less" scoped>
.link {
  color: #069;
  font-size: 12px;
  padding-right: 20px;
  float: right;
}
</style>

import { Toast } from "vant";
Toast("提示内容");

import request from "@/utils/request";

// 注册接口
export const registerAPI = (data) => {
  return request.post("/user/register", data);
};

methods: {
  async onSubmit (values) {
    // 往后台发送注册请求了
    await registerAPI(values)
    this.$toast.success('注册成功')
    this.$router.push('/login')
  }
}

import { Toast } from 'vant'

...

// 添加响应拦截器
request.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response.data
}, function (error) {
  if (error.response) {
    // 有错误响应, 提示错误提示
    Toast(error.response.data.message)
  }
  // 对响应错误做点什么
  return Promise.reject(error)
})

// 登录接口
export const loginAPI = (data) => {
  return request.post("/h5/user/login", data);
};

import { loginAPI } from '@/api/user'
import { setToken } from '@/utils/storage'

methods: {
  async onSubmit (values) {
    const { data } = await loginAPI(values)
    setToken(data.token)
    this.$toast.success('登录成功')
    this.$router.push('/')
  }
}

// 以前 token 令牌，如果存到了本地，每一次都写这么长，太麻烦
// localStorage.setItem(键， 值)
// localStorage.getItem(键)
// localStorage.removeItem(键)

const KEY = "my-token-vant-mobile";

// 获取
export const getToken = () => {
  return localStorage.getItem(KEY);
};

// 设置
export const setToken = (token) => {
  localStorage.setItem(KEY, token);
};

// 删除
export const delToken = () => {
  localStorage.removeItem(KEY);
};

// ... 省略其它代码

import { getToken } from "@/utils/storage";
// 全局前置守卫：
// 1. 所有的路由一旦被匹配到，在真正渲染解析之前，都会先经过全局前置守卫
// 2. 只有全局前置守卫放行，才能看到真正的页面

// 任何路由，被解析访问前，都会先执行这个回调
// 1. from 你从哪里来， 从哪来的路由信息对象
// 2. to   你往哪里去， 到哪去的路由信息对象
// 3. next() 是否放行，如果next()调用，就是放行 => 放你去想去的页面
//    next(路径) 拦截到某个路径页面

const whiteList = ["/login", "/register"]; // 白名单列表，记录无需权限访问的所有页面

router.beforeEach((to, from, next) => {
  const token = getToken();
  // 如果有token，直接放行
  if (token) {
    next();
    return;
  }

  // 没有token的人, 看看你要去哪
  // (1) 访问的是无需授权的页面（白名单），也是放行
  //  就是判断，访问的地址，是否在白名单数组中存在 includes
  if (whiteList.includes(to.path)) {
    next();
  } else {
    // (2) 否则拦截到登录
    Toast("没有登录, 请先登录!");
    next("/login");
  }
});

export default router;