Comprensión del módulo de inicio de sesión en segundo plano

Para algunos sitios web, la primera presentación es la página de inicio de sesión, por lo que la realización de la función de la página de inicio de sesión es muy importante.

Pensamiento:

• Para la implementación de diferentes contenidos de página, necesitamos implementarlo a través del enrutador.Primero , tenemos que definir las rutas que necesitamos, como /login, /404, /, etc.
• Con las rutas relevantes definidas, tenemos que mostrar si se trata de una página de inicio de sesión de acuerdo con diferentes condiciones cuando solo visitamos la dirección. Entonces, necesitamos configurar guardias de enrutamiento , usamos el token para juzgar aquí.
• Si hemos iniciado sesión y el inicio de sesión es exitoso, después de que enviemos la solicitud con éxito, el backend nos devolverá un token, y almacenaremos este token en vuex y también en la cookie del navegador .
• Realizaremos la protección de enrutamiento en función de si hay un valor de token. Primero, determinaremos si hay un token. Si no hay token , determinaremos si la dirección a la que queremos acceder es /login, /404, etc. Especificamos la dirección en la lista blanca, si es así, siguiente (), de lo contrario, siguiente ('/login'); si hay un token , juzgue si estamos accediendo a /login, si es así, siguiente ('/') y otros páginas de inicio, si no /login, juzgue el token de inicio de sesión especificado Si el usuario existe, si no, se puede obtener a través de la interfaz de invocación de métodos en acciones en vuex , si existe, será directamente siguiente ()

guardia de ruta

import router from '@/router'
import store from '@/store'
import nprogress from 'nprogress' // 引入进度条
import 'nprogress/nprogress.css'

const whiteList = ['/login', '/404']
// 前置守卫
router.beforeEach(async(to, from, next) => {
    
    
  nprogress.start()
  if (store.getters.token) {
    
    
    if (to.path === '/login') {
    
    
      next('/')
    } else {
    
    
      if (!store.getters.userId) {
    
    
        const {
    
     roles } = await store.dispatch('user/getUserInfo')
        // 筛选用户的可用路由
        const routes = await store.dispatch('permission/filterRoutes', roles.menus) // 筛选的到当前用户可用的动态路由
        // routes时刷选得到的路由
        // addRoutes
        router.addRoutes([...routes, {
    
     path: '*', redirect: '/404', hidden: true }]) // 添加动态路由到路由表
        // 添加完动态路由后
        next(to.path) // 相当于跳到对应的地址 相当于多做一次跳转
      } else {
    
    
        next()
      }
    }
  } else {
    
    
    if (whiteList.indexOf(to.path) > -1) {
    
    
      next()
    } else {
    
    
      next('/login')
    }
  }
  nprogress.done()
})
// 后置守卫
router.afterEach(() => {
    
    
  nprogress.done()
})

Interceptor en axios

import store from '@/store'
import axios from 'axios'
import {
    
     Message } from 'element-ui'
import {
    
     getTimeStamp } from '@/utils/auth'
import router from '@/router'
const TimeOut = 3600 // 定义token超时时间

const service = axios.create({
    
    
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000 // 设置超时时间
})
// 请求拦截器
// 需要进行请求判断，因为很对请求都需要基于用户已经登录进行操作
service.interceptors.request.use(config => {
    
    
  // config 是请求的配置信息
  // 注入token
  if (store.getters.token) {
    
    
    if (IsCheckTimeOut()) {
    
    
      store.dispatch('user/logout')
      router.push('/login')
      return Promise.reject(new Error('token超时了'))
    }
    // 请求头中注入token
    config.headers['Authorization'] = `Bearer ${
      
      store.getters.token}`
  }
  return config
}, error => {
    
    
  return Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(response => {
    
    
  const {
    
     success, message, data } = response.data
  if (success) {
    
    
    return data
  } else {
    
    
    Message.error(message) // 提示错误消息
    return Promise.reject(new Error(message))
  }
}, error => {
    
    
  if (error.response && error.response.data && error.response.data.cod === 10002) {
    
    
    store.dispatch('user/logout')
    router.push('/login')
  } else {
    
    
    Message.error(error.message) // 提示错误信息
  }
  return Promise.reject(error)
})
function IsCheckTimeOut() {
    
    
  var currentTime = Date.now()
  var timeStamp = getTimeStamp()
  return (currentTime - timeStamp) / 1000 > TimeOut
}
export default service