vue+axios新手实践实现登陆的示例代码


Posted in Javascript onJune 06, 2018

其实像这类的文章网上已经有很多很好的,写这篇文章,相当于是做个笔记,以防以后忘记

用到的:1、 vuex 2、axios 3、vue-route

登陆流程为:

1、提交登陆表单,拿到后台返回的数据

2、将数据存入vuex

vuex配置

这里直接跳过安装之类的,百度一大堆,我直接上代码

// store index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 初始化时用sessionStore.getItem('token'),这样子刷新页面就无需重新登录
const state = {
 user: window.sessionStorage.getItem('user'),
 token: window.sessionStorage.getItem('token')
}
const mutations = {
 //将token保存到sessionStorage里,token表示登陆状态
 SET_TOKEN: (state, data) => {
 state.token = data
 window.sessionStorage.setItem('token', data) 
 },
 //获取用户名
 GET_USER: (state, data) => {
 // 把用户名存起来
 state.user = data
 window.sessionStorage.setItem('user', data)
 },
 //登出
 LOGOUT: (state) => {
 // 登出的时候要清除token
 state.token = null
 state.user = null
 window.sessionStorage.removeItem('token')
 window.sessionStorage.removeItem('user')
 }
}

const actions = {
}
export default new Vuex.Store({
 state,
 mutations,
 actions
})

1、我在这里是将登录状态token,和用户名user存在sessionStorage里,以便组件使用,如果token为true则表示用户已经登陆sessionStorage和token这两个东西很简单用法自行百度

2、不要忘了在main.js引入store,vue实例中也要加入store

main.js

import store from './store/index'

new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

vue-route配置

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login'
import Activity from '../components/Activity'
import Index from '../components/Index'
import store from '../store/index'

Vue.use(Router)

const router = new Router({
 routes: [
 {
  path: '/',
  name: '/',
  component: Index
 },
 {
  path: '/login',
  name: 'login',
  component: Login
 },
 {
  path: '/activity',
  name: 'activity',
  component: Activity,
  meta: {
  requireAuth: true // 添加该字段,表示进入这个路由是需要登录的
  }
 }
 ]
})

// 注册全局钩子用来拦截导航
router.beforeEach((to, from, next) => {
 const token = store.state.token
 if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
 if (token) { // 通过vuex state获取当前的token是否存在
  next()
 } else {
  console.log('该页面需要登陆')
  next({
  path: '/login'
  // query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
  })
 }
 } else {
 next()
 }
})

export default router

这里我用到router.beforeEach来实现拦截登陆,

1、在需要验证的路由的meta里加入我们自己的requireAuth
2、router.beforeEach里通过requireAuth验证该组件是否需要登陆
3、验证token如果为flase就表示未登陆跳转到登录页

axios发送请求

submitLogin () {
 this.$refs.loginForm.validate(valid => {
 if (valid) {
  axios.post('/login', {
  user: this.loginForm.user,
  pass: this.loginForm.pass
  })
  .then((response) => {
   if (response.status === 200) {
   this.$store.commit('SET_TOKEN', response.data.token)
   this.$store.commit('GET_USER', response.data.user)
   this.$message({
    message: '登陆成功',
    type: 'success'
   })
   this.$router.push({name: 'activity'})
   }
  })
  .catch(function (error) {
   console.log(error)
  })
 } else {
  console.log('error submit!!')
  return false
 }
 })
},

后台我没写,是用mock.js拦截ajax请求

因为我用的是element-ui所以上面代码有一些直接无视,看核心的就行

1、在数据返回成功后用this.$store.commit来更新vuex里的数据

2、登陆成功后跳转this.$router.push()跳转页面,

这里注意,如果你在前面导航拦截的钩子用了query: {redirect: to.fullPath}的话,这里就 用 this.$router.push(this.$route.query.redirect);这样页面就能跳到

你跳到登陆页面前要去的那个路由了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
通用JS事件写法实现代码
Jan 07 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 #Javascript
vue实现简单loading进度条
Jun 06 #Javascript
security.js实现的RSA加密功能示例
Jun 06 #Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 #Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 #Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 #Javascript
详解创建自定义的Angular Schematics
Jun 06 #Javascript
You might like
Protoss魔法科技
2020/03/14 星际争霸
PHP mkdir()定义和用法
2009/01/14 PHP
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
Symfony查询方法实例小结
2017/06/28 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
jquery 表单取值常用代码
2009/12/22 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
Django学习之文件上传与下载
2019/10/06 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
python右对齐的实例方法
2020/07/05 Python
电子信息专业学生自荐信
2013/11/09 职场文书
学生实习介绍信
2014/01/15 职场文书
总经理岗位职责范本
2014/02/02 职场文书
西安大雁塔导游词
2015/02/10 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书