项目的登陆模块 实现（用的是本地的json 数据）（一）

准备一个新的项目（如果不知道如何创建vue - vue-cli3 项目请到我的另一篇文章 https://blog.csdn.net/qq_43634411/article/details/109455591）

（因为项目用到了element-ui js-cookie axios 三个模块所以这里我们打开vue-cli 添加这三个模块 如下图 ）

插件一：element-ui


依赖二

依赖三

完成后如下图结构

项目准备好了接下来清理创建的项目
1.清理App.vue

2.清空view 和components 文件夹
3.整理router 下的 index.js 文件

main.js

新建文件 api(放置网络请求模块)
新建文件utils （放置工具类模块）

因为项目登陆要用到cookie 存放token 值 如下图

配置axiso 同一请求 新建 文件 request.js(放置请求相关的东西)

// 引入 网络请求模块
import axios from 'axios'
// 引入vuex
import store from '@/store'
// 引入相应的element-ui 消息弹框
import { MessageBox, Message } from 'element-ui'

// 因为 登陆要判断 token 值所以要引入 cookie
import { getToken } from '@/utils/auth'
// 有时候我们会使用多个axios 需要url,header,type 那么如何解决这个问题
// 你可以创建一个拥有通用配置的axios实例 axios.creat([config])

const AxiosService = axios.create({
  // 通用的baseUrl
  baseURL: process.env.VUE_APP_BASE_API,
  // 相应时间
  timeout: 5000
})
// 配置请求拦截器
AxiosService.interceptors.request.use(
  config => {
    // 判断是否有token 值
    //
    if (store.getters.token) {
      // 设置请求 头
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    console.log(error)
    // Promise.reject 是es6 的异步操作函数 如果不了解 可以自己去看
    return Promise.reject(error)
  }
)
// 配置响应拦截器
AxiosService.interceptors.response.use(
  response => {
    const res = response.data
    // 获取返回的code值，code 值是后端返回的状态值
    if (res.code !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      // 判断是否是其他情况 比如别人登录了你的账号 ，或者 token 过期等其他原因
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else { // 否则请求成功返回数据
      return res
    }
  },
  error => {
    // 如果出错了 弹出 消息提示框
    console.log('err' + error)
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)
export default AxiosService

因为要用到vuex 状态管理 所以我们要 这里 （借鉴了网上的一个项目里的vuex 代码）

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

const getters = {

  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name

}
export default getters

user,js 用户状态值

// 引入登录相关 api
import { loginIn } from '@/api/user'
// 引入token 相关方法

import { getToken, setToken } from '@/utils/cookie.js'

// 用户 信息初始值
const state = {
  token: getToken(),
  name: '',
  avatar: '',
  introduction: '',
  roles: []
}
// 设置相关值
const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_INTRODUCTION: (state, introduction) => {
    state.introduction = introduction
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  },
  SET_ROLES: (state, roles) => {
    state.roles = roles
  }
}
// 数据操作和数据获取
const actions = {
//  用户登录
  loginIn ({ commit }, userInfo) {
    console.log(userInfo)
    // 这里是用的本地json 数据所以不用userinfo
    // 条用登录接口
    // 异步调用，为什么异步调用 自己百度
    return new Promise((resolve, reject) => {
      // 登录api 因为这里是本地所以我就没有添加值
      loginIn().then(response => {
        console.log(response)
        // 登录成功后设置token 值
        commit('SET_TOKEN', response.token)
        setToken(response.token)
        resolve()
      }).catch(error => {
        // 请求失败后
        reject(error)
      })
    })
  }
  // 用户登出
  // 获取用户信息

}
// 向外暴露值
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

书写用户登录接口

// 引入 axios 模块
import request from '@/utils/request'
// 用户登录
export function loginIn () {
  return request({
    url: './js/user.json',
    method: 'get'
  })
}

创建本地放置json 数据的地方

{
  "name": "BeJson",
  "url": "http://www.bejson.com",
  "page": 88,
  "isNonProfit": true,
  "code": 200,
  "token":"1234"
}

到这里关于用户登录的是做到一半了，那么我们来看下是否能请求到数据

书写登录页面

<!--  -->
<template>
<div class=''>
  <el-button type="" @click="loginIn">qwq</el-button>
</div>
</template>

<script>

export default {
  components: {},
  data () {
    return {

    }
  },
  computed: {},
  watch: {},
  methods: {
    loginIn () {
      // 调用一下 user 下的登陆方法 ,为什么这么调用 去看 vuex
      this.$store.dispatch('user/loginIn')
    }
  },
  created () {

  },
  mounted () {

  }
}
</script>
<style  scoped>
</style>

2.App.vue加

3.router页面

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/login.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  }

]

const router = new VueRouter({
  routes
})

export default router

准备好了 运行起来 终端 npm run serve

大功告成

当然还要上传到 码云上了
如果需要自取
https://gitee.com/little1/vue_5/tree/master