Vue Antd Admin關於登陸的一些小坑

時間 2021-05-29

標籤 html vue ios vuex 後端 api 跨域數組 antd 前後端分離欄目 HTML 简体版

原文原文鏈接

最近在開發一個管理的先後端分離頁面前一陣子都在寫靜態頁今天來了登陸接口準備搞一下把本身的思路和遇到的一些小坑告訴你們html

由於antd admin給咱們已經封裝好了登陸頁面咱們只須要拿來改一改就好
首頁打開scr/pages/login/Login.vue文件vue

<template>
  <common-layout>
    <div class="top">
      <div class="header">
        ![](@/assets/img/logo.png)
        <span class="title">{{systemName}}</span>
      </div>
      <div class="desc">Ant Design 是西湖區最具影響力的 Web 設計規範</div>
    </div>
    <div class="login">
      <a-form @submit="onSubmit" :form="form">
        <a-tabs size="large" :tabBarStyle="{textAlign: 'center'}" style="padding: 0 2px;">
          <a-tab-pane tab="帳戶密碼登陸" key="1">
            <a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;" />
            <a-form-item>
              <a-input
                autocomplete="autocomplete"
                size="large"
                placeholder="admin"
                v-decorator="['name', {rules: [{ required: true, message: '請輸入帳戶名', whitespace: true}]}]"
              >
                <a-icon slot="prefix" type="user" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input
                size="large"
                placeholder="888888"
                autocomplete="autocomplete"
                type="password"
                v-decorator="['password', {rules: [{ required: true, message: '請輸入密碼', whitespace: true}]}]"
              >
                <a-icon slot="prefix" type="lock" />
              </a-input>
            </a-form-item>
          </a-tab-pane>
          <a-tab-pane tab="手機號登陸" key="2">
            <a-form-item>
              <a-input size="large" placeholder="mobile number" >
                <a-icon slot="prefix" type="mobile" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-row :gutter="8" style="margin: 0 -4px">
                <a-col :span="16">
                  <a-input size="large" placeholder="captcha">
                    <a-icon slot="prefix" type="mail" />
                  </a-input>
                </a-col>
                <a-col :span="8" style="padding-left: 4px">
                  <a-button style="width: 100%" class="captcha-button" size="large">獲取驗證碼</a-button>
                </a-col>
              </a-row>
            </a-form-item>
          </a-tab-pane>
        </a-tabs>
        <div>
          <a-checkbox :checked="true" >自動登陸</a-checkbox>
          <a style="float: right">忘記密碼</a>
        </div>
        <a-form-item>
          <a-button :loading="logging" style="width: 100%;margin-top: 24px" size="large" htmlType="submit" type="primary">登陸</a-button>
        </a-form-item>
        <div>
          其餘登陸方式
          <a-icon class="icon" type="alipay-circle" />
          <a-icon class="icon" type="taobao-circle" />
          <a-icon class="icon" type="weibo-circle" />
          <router-link style="float: right" to="/dashboard/workplace" >註冊帳戶</router-link>
        </div>
      </a-form>
    </div>
  </common-layout>
</template>

<script>
import CommonLayout from '@/layouts/CommonLayout'
import {login, getRoutesConfig} from '@/services/user'
import {setAuthorization} from '@/utils/request'
import {loadRoutes} from '@/utils/routerUtil'
import {mapMutations} from 'vuex'

export default {
  name: 'Login',
  components: {CommonLayout},
  data () {
    return {
      logging: false,
      error: '',
      form: this.$form.createForm(this)
    }
  },
  computed: {
    systemName () {
      return this.$store.state.setting.systemName
    }
  },
  methods: {
    ...mapMutations('account', ['setUser', 'setPermissions', 'setRoles']),
    onSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err) => {
        if (!err) {
          this.logging = true
          const name = this.form.getFieldValue('name')
          const password = this.form.getFieldValue('password')
          login(name, password).then(this.afterLogin)
        }
      })
    },
    afterLogin(res) {
      this.logging = false
      const loginRes = res.data
      if (loginRes.code >= 0) {
        const {user, permissions, roles} = loginRes.data
        this.setUser(user)
        this.setPermissions(permissions)
        this.setRoles(roles)
        setAuthorization({token: loginRes.data.token, expireAt: new Date(loginRes.data.expireAt)})
        // 獲取路由配置
        getRoutesConfig().then(result => {
          const routesConfig = result.data.data
          loadRoutes(routesConfig)
          this.$router.push('/dashboard/workplace')
          this.$message.success(loginRes.message, 3)
        })
      } else {
        this.error = loginRes.message
      }
    }
  }
}
</script>

這裏的邏輯是點擊Submit獲取到表單的name和password而後調用login函數執行完login函數後執行afterLogin函數ios

如今咱們來看login 在src/services/user.js中vuex

import {LOGIN, ROUTES} from '@/services/api'
import {request, METHOD, removeAuthorization} from '@/utils/request'

/**
 * 登陸服務
 * @param name 帳戶名
 * @param password 帳戶密碼
 * @returns {Promise<AxiosResponse<T>>}
 */
export async function login(name, password) {
  return request(LOGIN, METHOD.POST, {
    user_name: name,
    password: password
  })
}

export async function getRoutesConfig() {
  return request(ROUTES, METHOD.GET)
}

/**
 * 退出登陸
 */
export function logout() {
  localStorage.removeItem(process.env.VUE_APP_ROUTES_KEY)
  localStorage.removeItem(process.env.VUE_APP_PERMISSIONS_KEY)
  localStorage.removeItem(process.env.VUE_APP_ROLES_KEY)
  removeAuthorization()
}
export default {
  login,
  logout,
  getRoutesConfig
}

這裏經過返回的用戶名和密碼來發送請求 request這個函數是封裝好的這個相信你們均可以看懂把參數的鍵值改爲本身接口的就好後端

getRoutesConfig()這個函數是用來動態獲取路由的我這裏獲取的是靜態的本地路由因此暫時不須要 LOGIN這個值就是請求的地址寫在了api.js中便於管理api

//跨域代理前綴
const API_PROXY_PREFIX='/api'
const BASE_URL = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_API_BASE_URL : API_PROXY_PREFIX
// const BASE_URL = process.env.VUE_APP_API_BASE_URL
module.exports = {
  LOGIN: `${BASE_URL}/Login/index`,
  ROUTES: `${BASE_URL}/routes`
}

我須要發送請求因此使用代理把LOGIN的後綴改爲你登錄的接口便可
而後到這裏咱們的登錄操做實際上已經完成了可是咱們還須要處理afterLogin的數據跨域

而後讓咱們回到Login頁面數組

this.logging = false
      const loginRes = res.data
      if (loginRes.code >= 0) {
        const {user, permissions, roles} = loginRes.data
        this.setUser(user)
        this.setPermissions(permissions)
        this.setRoles(roles)
        setAuthorization({token: loginRes.data.token, expireAt: new Date(loginRes.data.expireAt)})
        // 獲取路由配置
        getRoutesConfig().then(result => {
          const routesConfig = result.data.data
          loadRoutes(routesConfig)
          this.$router.push('/dashboard/workplace')
          this.$message.success(loginRes.message, 3)
        })
      } else {
        this.error = loginRes.message
      }
    }

讓咱們重點來看afterLogin這個函數邏輯是登陸後進行信息存儲
user爲用戶的基本信息包括暱稱頭像等等
permissions是用戶權限信息包括用戶能夠進行哪些操做
roles是用戶的角色信息能夠經過角色來進行權限管理
官方的寫法是登陸的返回接口必須包含這些信息且數據格式也要同樣由於咱們只規定了簡單的角色id 因此這裏須要從新處理一下
這裏注意若是不使用動態路由配置的話 getRouterConfig這個函數就能夠刪掉了antd

afterLogin(res) {
      this.logging = false
      const loginRes = res.data
      console.log(loginRes.data.token)
      if (loginRes.code >= 0) {
        // const {user, permissions, roles} = loginRes.data

   
        let user = {
          address: '河北',
          avatar: "https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png",
          name: 'admin',
        }
       let  permissions = [{
          id: 'form',                                    //權限ID
          operation: ['add', 'delete', 'edit', 'close']  //權限下的操做權限
        }]
        let roles = [{
          id: 'test',                                   //角色ID
          operation: ['add', 'delete', 'edit', 'close']  //角色的操做權限
        }]
        this.setUser(user)
        this.setPermissions(permissions)
        this.setRoles(roles)
        setAuthorization({token: loginRes.data.token})
        this.$router.push('/publicStore')
        this.$message.success(loginRes.message, 3)
      } else {
        this.error = loginRes.message
      }
    },

由於如今只有admin的概念因此我就把角色先寫死了
這裏的坑就是權限和角色的類型必須是數組或者直接寫一個簡單的字符串好比 permission = 'form' 我一開始看文檔直接複製粘貼文檔的內容登陸之後一直報錯路由不顯示後來才發現 roles和permission其實是數組前後端分離

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。