vue-admin-template 登录认证授权改造

浅浅的花香味﹌ 2022-12-25 07:58 171阅读 0赞

## 1. 登录页 ##

*  文件目录 **src/view/login/index.vue**
 *  登录方法

handleLogin() {
        
          this.$refs.loginForm.validate(valid => {
        
            if (valid) {
        
              this.loading = true
              // 调用的是 store/modules/user.js 里的 login 方法
              this.$store.dispatch('user/login', this.loginForm).then(() => {
        
                this.$router.push({
         path: this.redirect || '/' })
                this.loading = false
              }).catch(() => {
        
                this.loading = false
              })
            } else {
        
              console.log('error submit!!')
              return false
            }
          })
        }

## 2. 登录过程 ##

### (1) 首先会执行 user.js 里的 login 方法， ###

*  user.js 在 src/store/moudules/user.js

login({
         commit }, userInfo) {
        
        const {
         username, password } = userInfo
        return new Promise((resolve, reject) => {
        
          // 这里执行的 login 方法是 api/user.js 中的方法
          login({
         username: username.trim(), password: password }).then(response => {
        
          	//****这一部分改成你自己的业务逻辑****//
            const {
         data } = response
            //********************************//
            commit('SET_TOKEN', data)
            setToken(data)
            resolve()
          }).catch(error => {
        
            reject(error)
          })
        })
      }

### (2) 修改 api/user.js 中的 login 方法 ###

// 修改为你自己的后台地址，可能会产生跨域问题，百度有很多解决方案
    // 如果你后台是 spring 项目，可以直接在相应的 controller加 @CrossOrigin 注解即可
    export function login(data) {
        
      return request({
        
        url: 'http://localhost:8800/login',
        method: 'post',
        data: data
      })
    }

*  登陆后，token 存储到 cookie，以后发送请求会自动在请求头中添加 token 如果要修改相关信息，在 src/utils/request.js 中修改，包括 定义请求成功的返回码，token 相关的返回码

import axios from 'axios'
    import {
         MessageBox, Message } from 'element-ui'
    import store from '@/store'
    import {
         getToken } from '@/utils/auth'
    
    // create an axios instance
    const service = axios.create({
        
      baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
      // 请求时间超过 5s 视为错误
      timeout: 5000 // request timeout
    })
    
    // request interceptor
    service.interceptors.request.use(
      config => {
        
        // 请求前处理
        if (store.getters.token) {
        
          // 为请求头添加 token
          config.headers['RB-Token'] = getToken()
        }
        return config
      },
      error => {
        
        // 错误处理
        console.log(error) // for debug
        return Promise.reject(error)
      }
    )
    
    // response interceptor
    service.interceptors.response.use(
      /**
      * 如果您想获取http信息（例如标题或状态）
      * 请返回响应=> 响应
      */
      /**
      * 通过自定义代码确定请求状态
      * 这只是一个例子
      * 您也可以通过HTTP状态代码来判断状态
      */
      response => {
        
        const res = response.data
        // 如果自定义代码不是 1000，则将其判断为错误。
        if (res.code !== 1000) {
        
          Message({
        
            message: res.message || 'Error',
            type: 'error',
            duration: 5 * 1000
          })
    
          // 这里的返回码根据自己的业务逻辑进行调整，例如 token 过期
          if (res.code === 2555 || res.code === 2111 || res.code === 2444) {
        
            // to re-login
            MessageBox.confirm('登录信息已过期，请重新登录', '确认', {
        
              confirmButtonText: '重新登录',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
        
              store.dispatch('user/resetToken').then(() => {
        
                location.reload()
              })
            })
          }
          return Promise.reject(new Error(res.message || 'Error'))
        } else {
        
          return res
        }
      },
      error => {
        
        console.log('err' + error) // for debug
        Message({
        
          message: error.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(error)
      }
    )
    
    export default service

*  至此，登录过程已修改完成

## 3. 授权过程 ##

### (1) 查看 permission.js 的执行流程 ###

*  在登录完成后，执行了 setToken 将 token 信息保存到了 cookie 中（如果不想保存到 cookie 可以看后文的修改方法）。然后跳转到 ‘/’ 路径，当路由发生变化时，触发了 permission.js 中的 beforeEach 方法。
 *  permission.js 目录 src/permission.js
 *  主要是看 router.beforeEach方法

router.beforeEach(async(to, from, next) => {
        
      // start progress bar
      NProgress.start()
    
      // set page title
      document.title = getPageTitle(to.meta.title)
    
      // determine whether the user has logged in
      const hasToken = getToken()
      console.log(hasToken);
      if (hasToken) {
        
        if (to.path === '/login') {
        
          // if is logged in, redirect to the home page
          next({
         path: '/' })
          NProgress.done()
        } else {
        
          // determine whether the user has obtained his permission roles through getInfo
          const hasRoles = store.getters.roles && store.getters.roles.length > 0
          if (hasRoles) {
        
            next()
          } else {
        
            try {
        
              // 这里调用 store/modules/user.js 中的 info 方法
              // 同样，这里的逻辑需要根据你自己的需要进行调整
              //******************************************//
              const res  = await store.dispatch('user/getInfo')
              const roles = res.roleArray;
              //*******************************************//
              const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
    
              // dynamically add accessible routes
              router.addRoutes(accessRoutes)
    
              // hack method to ensure that addRoutes is complete
              // set the replace: true, so the navigation will not leave a history record
              next({
         ...to, replace: true })
            } catch (error) {
        
              // remove token and go to login page to re-login
              await store.dispatch('user/resetToken')
              Message.error(error || 'Has Error')
              next(`/login?redirect=${
          to.path}`)
              NProgress.done()
            }
          }
        }
      } else {
        
        /* has no token*/
    
        if (whiteList.indexOf(to.path) !== -1) {
        
          // in the free login whitelist, go directly
          next()
        } else {
        
          // other pages that do not have permission to access are redirected to the login page.
          next(`/login?redirect=${
          to.path}`)
          NProgress.done()
        }
      }
    })

### (2) 获取用户信息 ###

*  modules/user.js

getInfo({
         commit, state }) {
        
        return new Promise((resolve, reject) => {
        
        // 调用 api/user.js 中的 getInfo 方法
          getInfo(state.token).then(response => {
        
            const {
         data } = response
            if (!data) {
        
              reject('验证失败，请重新登录')
            }
    		// 获取用户的角色列表，用户名和头像
            const roles = data.roleArray;
            const name = data.username;
            const avatar = data.avatar;
    
            if (!roles || roles.length <= 0) {
        
              reject('角色必须为一个非空数组')
            }
    
            commit('SET_ROLES', roles)
            commit('SET_NAME', name)
            commit('SET_AVATAR', avatar)
            resolve(data)
          }).catch(error => {
        
            reject(error)
          })
        })

## 4. 将 token 存储到 localStorage ##

*  修改 src/utils/auth.js