登录流程

1. vuex子模块的创建

    export default {
        namespaced: true, //开启命名空间
        state: {
            token: ''
        },
        mutations: {
            
        },
        actions: {
            // 调用登录接口请求
            // 接口返回token
            // 调用mutation的方法 
        }
    }

2.组件内事件触发vuex子模块里面的actions内部的方法

    // 这里的user指的是vuex里面的一个子模块，不能缺失
    this.$store.dispatch('子模块名/actions的方法', val)

3、token持久化存储

通过vuex配合本地存储进行，本地存储存在的目的在于弥补vuex在界面刷新的时候被清空的缺点

4、vue解决开发环境下跨域问题。（其实后端可以开启cors解决，但是接口的安全性会受到影响）

跨域的含义：协议、主机名、端口号其中一个不同。它是浏览器提供的一种安全策略。
前端解决方案：vue-cli代理解决跨域
具体操作：

// 1、 在vue.config.js中添加proxy属性
    proxy: {
        '/api': {
            target: '要代理的目标地址'
        }
    }
// 删除原有的before配置选项
    // before: require('./mock/mock-server.js') //模拟数据

//发送验证
axios({
    method: 'post',
    url: '/api/sys/login',
    data: {
        mobile: '12345432',
        password: '1234'
    }
})

5、你是如何封装axios的

逐字稿：首先我们知道axios的作用是对请求相关进行一些操作。里面包括基地址、超时时间、请求拦截器和响应拦截器。接下来我们将进行以下操作：1、先安装axios，并在utils里面新建一个名为request的js文件。通过axios.create创建一个axios实例，里面配置基地址和超时时间；用instance接收这个实例。2、添加请求拦截器；3、添加响应拦截器；4、导出封装好的实例instance。

// 请求相关 - 基地址  超时时间 请求拦截器  响应拦截器
import axios from 'axios'
const instance = axios.create({
    baseURL: '/api',
    timeout: 10000
})

// 添加请求拦截器
instance.interceptors.request.use(function(confit){
    // 获取token
    // 判断token是否存在
    // 若存在 - 请求头中携带
    const token = store.getters.token
    if(token){
        config.headers.Authorization = `Bearer ${token}`
    }
    return config
}, function(error){
    // 对请求错误做些什么
    return Primise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(function(response){
    // 2xx 范围内的状态码会触发该函数
    // 对相应数据的处理
    console.log('响应拦截器返回的结果', response.data)
    const { message, success, data } = response.data  // 结构返回结果中的详细信息
    
    if(success) {
        Message.success(message)
        return response.data
    }else{
        Message.error(message)
        return Promise.reject(new Error(message))
    }
}, function(error) {
    // 超出 2xx 范围的状态码都会触发该函数。 
    // 对响应错误做点什么 
    return Promise.reject(error);
}

6、axios如何区分开发环境和生产环境

逐字稿：在进行项目开发的时候，我们将对应的环境分为开发环境和生成环境；我们在.env.development中设置开发环境的变量，默认NODE_NEW的值为development;在.env.production中设置生成环境变量；默认NODE_ENV值为production;我们通过process.env.属性的方式获取对应环境值。在进行项目开发的时候，process.env.属性这个操作可以让我们在表单默认信息填入的时候提供遍历：开发环境下，表单信息自动填入默认信息。生产环境中则为空。

7、谈谈你的项目中主页权限验证是如何实现的（permission.js）（鉴权）

逐字稿：A、项目中主页权限验证我们放在permission.js文件中实现。我们将其分为两种情况进行处理：1、用户访问主页的时候，判断若token存在则直接放行，没有token则调到登录页。2、用户访问登录页面，判断有token调到主页，没有token的话直接放行。B、项目中NProgress界面加载进度条的实现：首先我们需要引入，这里需要引入两个文件。然后再进行调用。

import store from './store'
const nProgress = require('nprogress')
import 'nprogress/nprogress.css'
const { default: router } = require('./router')

const whiteList = ['/login', '404']
router.beforeEach(async(to, form, next) => {
  nProgress.start()// 开启进度条
  const token = store.getters.token
  if (token) {
    if (to.path === '/login') {
      next('/')
      nProgress.done()// 关闭进度条
    } else {
      if (!store.getters.userId1) {
        await store.dispatch('user/updateUserInfo')
      }
      next()
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      nProgress.done()// 关闭进度条
    }
  }
})

router.afterEach(() => {
  nProgress.done()// 关闭进度条
})

以上是第三天的学习内容。本人处于学习阶段，疏漏之处在所难免，还望各位大神指正~

第二天学习总结