基于vue/cli3.0+脚手架搭建Vue项目(11)


文章目录

  • 基于vue/cli3.0+脚手架搭建Vue项目(11)
  • 前言
  • 一、vue项目里token的实现步骤
  • 二、代码实现
  • 1.登录页面
  • 2.api请求拦截时添加token信息
  • 3.router里更新token和uuid
  • 总结


前言

在vue项目里，token是用来当作前端和服务器通信的标识。经过登录页面后，每次发起的请求都需要携带上它，给服务器进行认证。

一、vue项目里token的实现步骤

1：用户登录时，前端调用后台提供的登录接口；

2：后台验证用户名和密码，验证通过后给前端返回token；

3：前端解析token后，将token存储在localStorage和vuex，跳转到项目首页；

到第四步这里可以有两种实现：

4.1：实现一：前端在发起请求时，每次都携带token给后台进行验证，不管是本地token被改动，或者是已经过期，均把token放在请求头header里抛给后台来判断和处理，如果是过期的token，后台返回对应的状态码，清除本地token信息，跳转到登录页面。

4.2：实现二：前端在路由跳转，或者发送请求前，先判断localStorage中token是否还存在，不存在就清除本地token信息，直接跳转到登录页面。如果还存在就继续将token放在请求的请求头header里面，如果token已过期，后台返回对应的状态码，清除本地token信息，跳转到登录页面。

二、代码实现

1.登录页面

( login接口可以看这里)

<template>
  <div class="loginPage">
    <div class="content">
      <div class="title">
        <span>账号登录</span>
      </div>
      <div class="input-group">
        <div class="input-row">
          <el-input v-model="username" placeholder="请输入账号/手机号"></el-input>
        </div>
        <div class="input-row">
          <el-input show-password v-model="password" placeholder="请输入密码"></el-input>
        </div>
      </div>
      <div class="btn-row">
        <el-button size="medium" round @click="login">登录</el-button>
      </div>
      <div class="register">注册账号</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      if (!this.username || !this.password) {
        return;
      }
      let params = {
        username: this.username,
        password: this.password,
        remember: false,
      };
      this.$api.common.login(params).then(res => {
        let { data, headers } = res;
        if (data.status === 200) {
          // 其他信息...
          // 因为接口返回的headers里已经设置了cookie
          if (headers.cookie) {
            headers.cookie.split(',').forEach(item => {
              let tempVal = item.split('=');
              if (tempVal[0] == 'token') {
                this.cacheCookie('TOKEN', tempVal[1]);
              }
              if (tempVal[0] == 'uuid') {
                this.cacheCookie('UUID', tempVal[1]);
              }
            });
            this.$router.push('/home');
          }
        }
      });
    },
    cacheCookie(type, value) {
      localStorage.setItem(type, value);
      this.$store.commit('OP_' + type, value);
    },
  },
};
</script>

<style lang="scss" scoped>
.loginPage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  .content {
    display: flex;
    flex-direction: column;
    width: 280px;
    height: 200px;
    .title {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    .input-group {
      flex: 1;
      display: flex;
      flex-direction: column;
      .input-row {
        margin-bottom: 12px;
      }
    }
    .btn-row {
      flex: 1;
      display: flex;
      justify-content: space-between;
      /deep/ .el-button {
        width: 100%;
      }
    }
    .register {
      margin-top: 4px;
      text-align: right;
    }
  }
}
</style>

2.api请求拦截时添加token信息

// 请求拦截
HTTP.interceptors.request.use(
  config => {
    //设置请求头信息
    let token = localStorage.getItem('token') || '';
    let uuid = localStorage.getItem('uuid') || '';
    const headersOption = {
      token,
      uuid,
    };
    config.headers = Object.assign(config.headers, headersOption);
    return config;
  },
  err => {
    console.log(err);
  },
);

后台在之后的每个接口的过滤器里都会去校验token信息，所以前端可以不需要再校验是否存在或者过期。但是，我们需要在刷新页面时，重新更新store里的token

3.router里更新token和uuid

import store from '@/store/index';
router.beforeEach((to, from, next) => {
  cacheCookie();
  next();
});
function cacheCookie() {
  // 将localStorage里的token信息缓存在vuex
  store.commit('OP_TOKEN', localStorage.getItem('TOKEN'));
  store.commit('OP_UUID', localStorage.getItem('UUID'));
}

tip:附上store代码：

import { OP_TOKEN , OP_UUID } from './mutations-type';

const state = {
  token: '',
  uuid: ''
};
const getters = {
  getToken: state => state.token,
  getUuid: state => state.uuid
};
const mutations = {
  [OP_TOKEN](state, data) {
    state.token =data
  },
  [OP_UUID](state, data) {
    state.uuid =data
  }
};
const action = {};

export default {
  public: {
    state,
    getters,
    mutations,
    action
  }
};

mutations-type.js文件代码

export const OP_TOKEN = 'OP_TOKEN';
export const OP_UUID = 'OP_UUID';

总结

祝你今天愉快