2020 zero base to quickly develop Vue family bucket develop the electricity business management system (Element-UI) Logout function realization

1 Introduction

寒假是用来反超的！Vue put together to learn, this blog is about the log off function, please enlighten ~

2, Log Overview

2.1 Business Process Log

• ① Enter the user name and password in the login page
• ② verified by the interface background
• ③ After validation, the response page jump to project the background state

Related technical point 2.2 Logging operations

• http is stateless
• By recording the state of the client-side cookie
• In the recording state through the session server side
• Maintaining the status token way

Since http is stateless, if the client and server-side cross-domain problem, we chose to maintain the state in a token way

Log -token 2.3 Principle Analysis

3, log function realization

3.1 login page layout

Element-UI layout by

• the - form
• el - form - item
• el - input
• el - button
• Fonts icon

Then we open our vue_shop project with vscode, in order to develop our login function, we'll create a new login branch When complete, then merge onto our master branch

If you do not vue_shop project, here I offer a:
link: https: //pan.baidu.com/s/159VHSB5OxvfuQ2rNlbrrdQ
extraction code: hark

Using the following instructions sequentially vscode terminal:

git status  //查看分支状态
git checkout -b login  //创建新的login分支
git branch  // 查看分支

3.2 combed project structure

在终端中输入npm run serve启动我们刚刚导入进去的项目
正常情况下，会出现以下界面：

于是，我们需要对我们的项目进行梳理，删去一些没有必要的文件
删除以下文件的代码，最后格式如下：

App.vue

<template>
  <div id="app">
    App 根组件
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
</style>

router中的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
]

const router = new VueRouter({
  routes
})

export default router

最后，直接删掉views中的文件

PS：删除过程中报错属于正常现象，当删除完毕后就不会报错了！

然后，查看浏览器，如果看到显示App 根组件则表示项目结构梳理完毕了

3.3 渲染Login组件并实现路由重定向

• ① 在components目录下创建一个login.vue登录组件
  这个登录组件由三部分组成：分别是结构、样式、行为
  那么导入这三部分模板如下：

<template>
    <div>
      登录组件
    </div>
</template>

<script>
  export default {
    name: 'vueComponent',
    components: {},
    data () {
      return {}
    },
    methods: {}
  }
</script>

<style lang="less" scoped>

</style>

然后在我们的router中配置路由给App.vue

渲染路由

<template>
  <div id="app">
    <!--路由占位符-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
</style>

配置router包中index.js路由路径并实现路由重定向

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
Vue.use(VueRouter)

const routes = [
  { path: '/', redirect:'/login'},
  { path: '/login' , component: Login}
]

const router = new VueRouter({
  routes
})

export default router

最后，打开我们的网页，会发现直接跳到登录界面

3.4 设置背景色并在屏幕中央绘制登录盒子

3.5绘制默认头像

3.6 绘制登录表单区域

3.7 绘制带icon的input输入框

3.8 实现表单的数据绑定

3.9 实现表单数据验证

3.10 实现表单的重置功能

3.11 实现登录前表单数据的预校验

3.12 配置axios发起登录请求

3.13 配置Message全局弹框组件

3.14 完善登录之后的操作

1.将登陆成功之后的token，保存到客户端的sessionStorage中
	1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问
	1.2 token只应在当前网站打开期间生效，所以将token保存在sessionStorage中
2.通过编程式导航跳转到后台主页，路由地址是 /home

3.15 路由导航守卫控制页面访问权限

比如当我们进入home页面时，会有一个token令牌，当我们删除令牌时，还是能访问home页面，然后home页面应该是有权限的界面，只有你登录进去你才能访问该界面，所以对上述情况的话，应该返回给登录页。这就是路由导航守卫该做的事了！

//挂载路由导航
router.beforeEach((to,from,next)=>{
  //to 将要访问的路径
  //from 代表从哪个路径跳转而来
  //next是一个函数，代表放行
  //  next()代表放行  next('/login') 强制跳转
  
  if(to.path == '/login') return next()
  //获取token
  const tokenStr = window.sessionStorage.getItem("token");
  if(!tokenStr) return next('/login')
  next()

})

4、退出功能实现

基于token的方式实现退出比较简单，只需要销毁本地的token即可。这样，后续的请求就不会携带token，必须重新登录生成一个新的token之后才可以访问页面。

loginOut:function(){
        //清空token
        window.sessionStorage.clear();
        //跳转到登录页
        this.$router.push('/login');
    }

5、结束语

至此，我们的登录退出功能就实现完成了，最后，我们将login分支合并到master分支上去

Vue family bucket develop the electricity business management system code cloud address, welcome to learn together ~

https://gitee.com/Chocolate666/vue_shop

---

Finally, after reading this blog, I feel quite helpful, can continue to view the contents of other columns wailing, Vue together to learn it ~

Click to enter Vue❤ learn column ~

学如逆水行舟，不进则退