当前位置:  首页  >  PHP资讯  >  业界资讯

vue实现登录功能

这篇文章主要介绍了vue实现登录功能的步骤,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下

1.背景

完成了登录的表单输入框界面如下:

代码:

  

2.表单数据绑定

可以查看element的官方案例

本案例代码如下:

 
 

3.表单数据格式错误提示

官方案例:

本案例代码如下:

   

4.表单重置功能

官方案例如下:

本案例代码:

   

5.请求发出前数据校验

 // 登录 login() { // 登录前参数验证 this.$refs.loginFormRef.validate((valid) => { if (!valid) { console.log("参数验证失败") return } console.log("参数校验成功") }) }

6.发起登录请求

1.安装:axios(可以cnpm安装,也可以下载js引入文件)

cnpm install axios -S
-D 等价于 --save-dev
-S 等价于 --save

2.引入到vue项目中

import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:XXXX/XXXXX'
Vue.prototype.$http = axios

3.发起登录请求

   

7.消息提示配置

1.添加element 消息组件

2.使用

8.登录成功后token存放

 // 登录 login() { // 登录前参数验证 this.$refs.loginFormRef.validate(async (valid) => { if (!valid) return ; // 发起网络请求登录 let {data: result} = await this.$http.post('login', this.loginForm) console.log(result) if (result.meta.status !== 200){ this.$message.error(result.meta.msg) return } this.$message.success("登录成功") // token放入 sessionStorage window.sessionStorage.setItem('token', result.data.token) // 跳转到home路径 this.$router.push("/home") }) }

9.路由导航守卫-登录拦截

 import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/Login' import Home from '@/components/Home' Vue.use(Router) const router = new Router({ routes: [ { path: "/", redirect: "/login" }, { path: '/login', name: 'Login', component: Login } , { path: '/home', name: 'Home', component: Home } ] }) router.beforeEach((to, from, next) => { // to 将要访问的路径 // from 从哪里跳转来的 // next 放行 // 判断是不是登录登录,登录路径直接放行 if (to.path == '/login') { next() return } // 获取token,看是否有token,有token放行 const token = window.sessionStorage.getItem("token") if (!token) { next('/login') return; } // 放行 next(); }) export default router

10.退出功能

   

以上就是vue实现登录功能的详细内容,更多关于vue 登录功能的资料请关注其它相关文章!

内容推荐:免费高清PNG素材下载
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4