VUE指南-搭建一个实战电商后台管理平台(三)
一、在components 创建登录组件
二、样式使用Sass,加上scoped表示只在当前页面生效,不加则全局生效
三、使用阿里巴巴矢量图标库
四、表单预验证
五、使用axios
六、保存token
七、router导航守卫
八、后台登出
九、代码提交
(1)创建路由重定向,创建登录组件,在路由中导入并使用,并在App.vue根目录中,使用路由占位符
router index.js : import Vue from 'vue' import VueRouter from 'vue-router' import Login from '../components/login/index' Vue.use(VueRouter) const routes = [ // 路由重定向 { path: '/', redirect: '/login' }, // 登录组件 { path: '/login', component: Login } ] const router = new VueRouter({ routes }) export default router
App.vue : 使用路由占位符
<template> <div id="app"> <!--路由占位符--> <router-view></router-view> </div> </template>
(3)阿里巴巴示例图标使用
1.选择图标收藏入库,生成项目。2.下载至本地。3.拷贝font文件夹到assets文件夹中。4.在main.js中引入。5.使用font-class 引用
在main.js中引入
// 字体图标 import '../src/assets/fonts/iconfont.css'
(4)表单预验证:点击登录后,判断valid参数是否为true,表示验证是否通过。loginForm要与el-form中的ref匹配
this.$refs.loginForm.validate(valid => { console.log(valid) })
(5)使用axios
/** * axios 配置 * 设置请求根路径 * 挂载到vue * */ import axios from 'axios' axios.defaults.baseURL = '' Vue.prototype.$axios = axios
login.vue 验证axios
const reset = this.$axios({ method: 'post', url: 'http://timemeetyou.com:8889/api/private/v1/login', data:this.formData }); console.log(reset)
打印返回是Promise,在箭头函数前加async改为异步,await简化代码(await只能用在async中)
codingSubmit () {
console.log(this)
this.$refs.loginForm.validate(async valid => {
if (!valid) {
return
}
// 解构赋值:只需要返回的data
const {data:res} = await this.$axios({
method: 'post',
url: 'http://192.168.31.61:8080/api/v1/admin/login',
data:this.formData
});
console.log(res)
})
}
before
after
(6)保存token
// 一、登录成功后的token,保存到客户端的sessionStorage(临时存储)中
// 1.为什么需要token:项目中的其他api接口除了登录,都必须在登录后验证token再能访问
// 2.为什么要保存到sessionStorage:localStorage用于持久化的本地存储,sessionStorage用于本地存储一个会话级别的数据
// 二、通过编程式导航调整到后台主页,主页:/home(this.$router.push())
(7)路由导航守卫
// 路由导航守卫控制访问权限 // 如果用户没有登录,不准用户通过URL直接访问特定页面,需要重新导航到登录页 // 为路由对象,添加beforeEach 导航守卫 router.beforeEach((to,from,next)=>{ // beforeEach接收一个回调函数,包含三个形参 // to : 将要访问的页面路径 // from : 从哪个页面跳转而来 // next : 放行函数 // 判断to是否是“/login”(用户访问登录页,放行) if(to.path === '/login') return next(); // 从sessionStorage 中获取保存的token值 // 如果没有token,强制跳转到登录页 const tokenStr = window.sessionStorage.getItem('accessToken') if(!tokenStr) return next('/login') // 有token,放行 next() })
(8)后台登出
logOut(){ const _this = this this.$message({ message: '后台已登出', type: 'success', duration: 3000, // onClose 关闭时的回调函数 onClose(){ // 清空token window.sessionStorage.clear(); _this.$router.push('/login') } }) }
(9)代码提交
git status 查看代码状态
git add . 提交代码到暂存区
git commit -m "登录功能完善" 提交代码到本地仓库
git branch 查看当前分支
git checkout master 切换到主分支
git merge login 合并登录分支
git push 推送到码云
其他:
git push -u origin login 推送指定分支到码云