登录模块思路

登录模块

1：表单校验

elementui的from表单，rules校验 兜底校验

2: 发送请求

> utils/request.js中获取axios实例 设置基地址 基地址在环境变量中配置 不同环境 基地址不同

> 在api/user.js 引入request 写请求数据方法

> 在request.js中设置请求拦截器，响应拦截器

> 请求拦截器

 

 

判断vuex的token是否有值，有值则请求头带token

service.interceptors.request.use( config => { const token = store.state.user.token // 如果当前存有token,就加在请求头上 if (token) { config.headers['Authorization'] = Bearer ${token} } return config } , error => { return Promise.reject(error) })

注意：上面的authorization和bearer 不是固定的。

> 响应拦截器：

判断当前操作是否成功（code=200,success=false），决定axios是否报错

简化response返回的数据 return response.data

 

3：跨域（协议，域名，端口有一个不相同就是跨域）

跨域解决方法：

1) 前端用 jsonp发送请求 jsonp不是ajax请求 需要后端配合

2) 后端配置cros 设置响应头

3)前端 使用服务器代理

跨域只针对ajax，js,css，img不存在跨域问题。

思路：在前端服务和后端接口服务之间 架设一个中间代理服务，它的地址保持和前端服务一致，服务器之间不存在跨域

服务器代理解决方案：（vue-cli集成了跨域代理功能 只能用在开发阶）

 

 

  1）：vue.config.js配置
  
  module.exports = {
   devServer: {
    // ... 省略
   // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我们要代理的真实接口地址
        }
      }
    }
  }
}

2）：.env.development文件(配置发送请求的基地址，不需要配置ip地址因为代理服务器的ip跟前端返送请求的ip一致)

VUE_APP_BASE_API = '/api'

3）：axios的url中省略前面的api

 

4：保存token

 

登录成功后 返回的token保存到vuex中 state中定义token=null，mutations修改token ​ this.$store.commit("命名空间/mutations名"，参数)

this.$store.commit('user/setToken', res.data)

 

token持久化

token保存在vuex中，页面刷新后 数据就没有了

思路：

1. 在对token进行初始化的时候先从本地取一下，优先使用本地取到的值

2. 在设置token的时候除了在vuex中存一份，在本地也同步存一份

3. 在删除token的时候除了把vuex中的删除掉，把本地的也一并删除

   示例：import Cookies from 'js-cookie' const TokenKey = 'hrsaas-ihrm-token' // 设定一个独一无二的key export function getToken() { return Cookies.get(TokenKey) }

   export function setToken(token) { return Cookies.set(TokenKey, token) }

   export function removeToken() { return Cookies.remove(TokenKey) }

5:vuex中action调登录接口

现在的写法，vuex管理用户的数据只有state和mutation，异步请求我们是在组件里做的，那我们可不可以在action里发送请求，然后组件里dispatch我们的action呢？ 当然是可以的，改写一下

actions: { // data表示接口参数 async userLogin(context, obj) { console.log('action userLogin', context, obj) // 调用ajax请求去做登陆 const res = await login(obj) // 在actions中，如果要修改state，还是要调用mutaions // context.commit('mutation名'， 参数) context.commit('setToken', res.data) } }

6:前置路由守卫

页面路由跳转时，一定会进入前置路由守卫；

路由守卫中一定要调用next

 

 

 

登录状态下（有token）不可以访问login

非登录状态下，不可以访问除了白名单 的页面

导航守卫函数中，一定要调用next( )

to.path: to是一个路由对象，path表示路径，是它的一个属性