バックグラウンドログインモジュールの理解

一部のWebサイトでは、最初のプレゼンテーションがログインページであるため、ログインページの機能の実現は非常に重要です。

考え：

さまざまなページコンテンツを実装するには、ルーターを介して実装する必要があります。最初に、/ login、/ 404、/などの必要なルートを定義する必要があります。
関連するルートを定義したら、そのアドレスにアクセスしたときに、さまざまな条件に従ってログインページであるかどうかを表示する必要があります。したがって、ルーティングガードを設定する必要があります。ここでは、トークンを使用して判断します。
ログインしてログインに成功すると、リクエストが正常に送信された後、バックエンドからトークンが返され、このトークンがvuexとブラウザのCookieに保存されます。
トークン値があるかどうかに基づいてルーティングガードを実行します。最初に、トークンがあるかどうかを判断します。トークンがない場合は、アクセスするアドレスが/ login、/404などであるかどうかを判断します。ホワイトリストでアドレスを指定します。指定する場合はnext（）、そうでない場合はnext（'/ login'）;トークンがある場合は、 / loginにアクセスしているかどうかを判断し、アクセスしている場合はnext（'/'）などホームページ、/ loginでない場合は、指定されたログイントークンを判断します。ユーザーが存在するかどうか、存在しない場合は、vuexのアクションのメソッド呼び出しインターフェイスを介して取得できます。存在する場合は、直接next（）になります。

ルートガード

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()
})

アクシオスのインターセプター

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

バックグラウンドログインモジュールの理解

おすすめ