最近在開發一個管理的先後端分離頁面 前一陣子都在寫靜態頁 今天來了登陸接口 準備搞一下 把本身的思路和遇到的一些小坑告訴你們html
由於antd admin給咱們已經封裝好了登陸頁面 咱們只須要拿來改一改就好
首頁打開scr/pages/login/Login.vue文件vue
<template> <common-layout> <div class="top"> <div class="header">  <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其實是數組前後端分離