zoukankan      html  css  js  c++  java
  • vue登录流程

    vue后台项目的一套基本的登录流程:
    前端调后端的登录接口,每次登录成功后,后端会返回一个token字段,前端将这个token保存,之后发送请求的时候,请求头带上这个token,后端收到请求后,会匹配token,匹配成功,则发送接口,匹配失败,则不会允许请求接口,vue项目中,可以在axios中封装一个请求拦截器
    封装请求拦截:

    import axios from 'axios'
    import store from '@/store'
    import router from '@/router'
    import {getToken} from '@/utils/auth'//利用cookies存取token
    
    const service = axios.create({
      baseURL: process.env.VUE_APP_BASE_API, // 接口 url = base url + request url
      
    })
    
    // request interceptor
    service.interceptors.request.use(
      config => {
        if (store.getters.token) {//将后端获取的token加到接口的请求头里去后端匹配
          config.headers['token'] = getToken()
        }
    
        return config
      },
      error => {
        return Promise.reject(error)
      }
    )
    
    // response interceptor
    service.interceptors.response.use(response => {
    
        const result = response.data
    
        if (response.headers && response.headers['content-type'] === 'application/octet-stream') {
          // 下载文件 - 直接返回成功-不走下面拦截
          return response
        }
    
        if (result.code !== 200) {
          if (result.code === 403) { // 登录失效
            ....
            return Promise.reject(result)
          } else {
                ...
            // 请求失败-业务的失败
            return Promise.reject(result)
          }
        } else { // 请求成功
            return result.data
        }
    }, error => {
        const result = { code: 9999, message: '网络错误' }
        return Promise.reject(result)
    })
    
    export default service
    
    
  • 相关阅读:
    linux中断申请之request_threaded_irq
    中断处理
    barrier()函数
    Intellij-设置生成serialVersionUID的方法
    mybatis一级缓存二级缓存
    mysql-EXPLAIN
    mybatis配置多个数据源事务(Transaction)处理
    mybatis实战教程三:mybatis和springmvc整合
    责任链模式
    MySQL-InnoDB-锁
  • 原文地址:https://www.cnblogs.com/shemingxin/p/14299106.html
Copyright © 2011-2022 走看看