后台整合篇之VUE登录整合

最新推荐文章于 2024-08-07 10:58:33 发布

红歌之行

最新推荐文章于 2024-08-07 10:58:33 发布

阅读量997

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/ljh1228/article/details/125992401

版权

做了很多年的java开发，从SpringMVC，到Springboot的，一直在进步，但是也一直没有回过头来系统性总结，今天就来总结一下，以便系统性理解。

我相信开发的很多人，大部分人都是基于业务进行项目或产品开发，都是用别人现成的框架，或者网上开源的框架直接开整，其中很少有人能系列的搭建一套这样的框架，或者不能够系列的把整个项目串联起来，形成自己的认知，除非，自己手摸手，自己撸过，，有时候撸过一边是没感觉的，得撸两边，再次我也是通过自己的整合和理解，总结一下

做后台的应该对后台的整个请求，拦截应该是不陌生的，后面也会整理出后台的系列总结，

今天基于VUE整合后台前端框架，我也有学习思考过那些框架大佬，为什么能做成这样的事，我认为他也是撸多了，才有的，加上理解，融会贯通，最后自己的任督二脉就通了。

整合VUE后台框架，首先要了解一下VUE语法，和官网文档，系统性过一遍，VUE官网

有时候有些东西理解不了，没关系，先熟悉，脑子里有个概念.

整合框架，找一个VUE的基础框架。点击，找个基础版的，以实战带动理解

# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git

# enter the project directory
cd vue-admin-template

# install dependency
npm install

# develop
npm run dev

运行起来可以直接看效果。

梳理一下后台整合流程，调用后台登录接口 ——> 获取token，前端存储token，按照后台约定的方式，将在头信息中带上登录后的token，进行请求，根据登录后获取的权限进行路由控制

上面的代码获取到之后，需要修改的地方是，登陆后把账号密码存储到Cookie

在Utils定义一个support.js

import Cookies from 'js-cookie';
const SupporKey = 'supportKey';
export function getSupport(){
  return Cookies.get(SupporKey)
}

export function setSupport(isSupport){
  return Cookies.set(SupporKey,isSupport,{expires:3})
}

export function setCookie(key,value,expires){
  return Cookies.set(key,value,{expires:expires})
}

export function getCookie(key) {
  return Cookies.get(key)
}

在login- index.vue中导入进来

import {setCookie} from '@/utils/support';

这样就把账号密码存储到浏览器本地

this.$store.dispatch('user/login', this.loginForm).then((res) => {
            setCookie("username",this.loginForm.username,15);
            setCookie("password",this.loginForm.password,15);
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })

this.$store.dispatch('user/login', this.loginForm) 中user/login这个路径的方法是在store/modules/user.js中定义的，如果用IDEA的话，是可以点过去的

在actions对象中，定义的几个方法就是用来处理登录后的token存储，获取用户信息的，退出登录的

原先的方法是这样的


const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response

        if (!data) {
          return reject('Verification failed, please Login again.')
        }

        const { name, avatar } = data

        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

  // user logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        removeToken() // must remove  token  first
        resetRouter()
        commit('RESET_STATE')
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // remove token
  resetToken({ commit }) {
    return new Promise(resolve => {
      removeToken() // must remove  token  first
      commit('RESET_STATE')
      resolve()
    })
  }
}

改造后的方法


const actions = {
  // 登录
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        console.log(response.data)
        const { data } = response
        const tokenStr = data.tokenHead + data.token
        commit('SET_TOKEN', tokenStr)
        setToken(tokenStr)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo().then(response => {
        const data = response.data
        if(data.roles && data.roles.length >0){
          commit("SET_ROLES",data.roles)
        }else{
          reject("getInfo:juese 必须不能为空数组")
        }
        commit("SET_NAME",data.username)
        commit("SET_AVATAR",data.icon)
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },

  // user logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        removeToken() // must remove  token  first
        resetRouter()
        commit('RESET_STATE')
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // remove token
  resetToken({ commit }) {
    return new Promise(resolve => {
      removeToken() // must remove  token  first
      commit('RESET_STATE')
      resolve()
    })
  }
}

主要改造的就是定义了自己的token方式，后台返回了tokenHead ，因为后台采用的是JWT+security方式，登录后请求头的格式为 Authorization： Bearer xxxxxx；的方式，

所以需要进行处理

const tokenStr = data.tokenHead + data.token
        commit('SET_TOKEN', tokenStr)

也可以前端写死，在request中request interceptor方法中新增一个

// 登录完成之后给每一个请求头携带Authorization
      config.headers['Authorization'] = getToken()

框架中是这样的，其实这个地方目前改动不大，主要是这个地方，按照自己的头方式去请求，

// let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()

很多时候不理解是因为自己没有去做尝试，其实尝试之后，才能更好的更系统性的去理解中间的逻辑，和把掌握的知识点，串成一个面

最后总结，就是登录后存token，请求的时候按照后台需要的格式携带token，就能把登录整合起来

VUE框架package.json中，dependencies中包含的就是所需要的技术栈

 {
  "dependencies": {
    "axios": "0.18.1",
    "element-ui": "2.13.0",
    "js-cookie": "2.2.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "path-to-regexp": "2.4.0",
    "vue": "2.6.10",
    "vue-router": "3.0.6",
    "vuex": "3.1.0"
  }
}

其实这里面还要扩充的知识点有