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 推送指定分支到码云