最近在开发一个治理的前后端拆散页面 前一阵子都在写动态页 明天来了登录接口 筹备搞一下 把本人的思路和遇到的一些小坑通知大家
因为antd admin给咱们曾经封装好了登录页面 咱们只须要拿来改一改就好
首页关上scr/pages/login/Login.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函数
当初咱们来看login 在src/services/user.js中
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中 便于管理
//跨域代理前缀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_URLmodule.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这个函数就能够删掉了
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实际上是数组