vue+vuex+axios实现登录、注册页权限拦截


Posted in Javascript onMarch 09, 2018

在GitHub上有很多写好的模板,这个项目也是基于模板做的。

现在记录一下我做的过程

1、修改config文件夹里的dev.env.js里的BASE_API,把地址改成请求后端的公共部分

BASE_API: '"http://192.168.xx.xx"',

2、接下来就是操作src文件,先在 views里写好vew组件(login.vue,regist.vue),写好到router里的index.js里配置好路径

login.vue

<template>
 <div class="login-container">
  <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
     label-width="0px"
     class="card-box login-form">
   <h3 class="title">登录</h3>
   <el-form-item prop="name">
  <span class="svg-container svg-container_login">
   <svg-icon icon-class="user"/>
  </span>
    <el-input name="name" disabled type="text" v-model="loginForm.name" autoComplete="on"
      placeholder="用户名"/>
   </el-form-item>
   <el-form-item prop="password">
  <span class="svg-container">
   <svg-icon icon-class="password"></svg-icon>
  </span>
    <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
      autoComplete="on"
      placeholder="密码"></el-input>
    <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye"/></span>
   </el-form-item>
   <el-form-item>
    <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
    登录
    </el-button>
   </el-form-item>
  </el-form>
  </div>
</template>
<script>
 export default {
 name: 'login',
 data() {
  const validateUsername = (rule, value, callback) => {
  if (value.trim().length<1) {
   callback(new Error('用户名不能为空'))
  } else {
   callback()
  }
  };
  const validatePass = (rule, value, callback) => {
  if (value.trim().length < 1) {
   callback(new Error('密码不能为空'))
  } else {
   callback()
  }
  };
  return {
  loginForm: {
   name: '',
   password: ''
  },
  loginRules: {
   name: [{required: true, trigger: 'blur', validator: validateUsername}],
   password: [{required: true, trigger: 'blur', validator: validatePass}]
  },
  loading: false,
  pwdType: 'password'
  }
 },
 methods: {
  showPwd() {
  if (this.pwdType === 'password') {
   this.pwdType = ''
  } else {
   this.pwdType = 'password'
  }
  },
  handleLogin() {
  this.$refs.loginForm.validate(valid => {
   if (valid) {
   this.loading = true;
   this.$store.dispatch('Login', this.loginForm).then(() => {
    this.loading = false;
    this.$router.push({path: '/'});
   }).catch((e) => {
    this.loading = false
   })
   } else {
   console.log('error submit!!')
   return false
   }
  })
  }
 }
 }
</script>

router/index.js

{ path: '/login', component: _import('Login/login'), hidden: true }

3、在api里的login.js里写好与后端对接的接口地址,在stores里的modules里的user.js里定义user,有state,mutations,action,具体的请求操作写在action里,login.vue或regist.vue调用user.js里写好的请求,getter.js里定义store的getters

api/login.js

import request from '@/utils/request'
export function login(name,password) {
 return request({
 url: '/XX/XX',
 method: 'post',
 data: {
  name,
  password
 } 
 })
}

stores/modules/user.js

import { login,regist,logout } from '@/api/login'
  import { getToken,setToken } from '@/utils/auth'
  const user = {
  state: {
   name:'',
   token:''
  },
  mutations: {
   SET_NAME: (state, name) => {
   state.name = name;
   },
   SET_TOKEN: (state, token) => {
   state.token = token;
   setToken(token);
   }
  },
  actions: {
   // 登录
   Login({ commit }, userInfo) {
   const name = userInfo.name.trim();
   const password = userInfo.password.trim();
   return new Promise((resolve, reject) => {
    login(name, password).then(response => {
    const data = response.data;
    commit('SET_NAME', data.name);
    commit('SET_TOKEN', data.token);
    setName(data.name);
    setToken(data.token);
    resolve(response); }).catch(error => { reject(error) }) }) },
   // 注册 
   Regist({ commit }, userInfo) { 
   const name= userInfo.name.trim(); 
   const password = userInfo.password.trim(); 
   return new Promise((resolve, reject) => { 
    regist(name, password).then(response => { 
    const data = response.data; 
    commit('SET_NAME', data.name); 
    commit('SET_TOKEN', data.token);
    setName(data.name);setToken(data.token); 
    resolve(response);
    }).catch(error => { 
    reject(error) }) }) }, 
   // 登出 
   LogOut({ commit, state }) {
   return new Promise((resolve, reject) => {
   logout().then(response => {
    commit('SET_NAME', '');
    commit('SET_TOKEN', '');
    setName('');
    setToken(false);
    //removeName();
    //removeToken();
    resolve(response);
   }).catch(error => {
    reject(error)
   })
   })
  }, 
   // 前端 登出 
   FedLogOut({ commit }) { 
   return new Promise(resolve => {
  setToken(false);
 commit('SET_TOKEN', false);
 resolve()
   })
   }
  }
  }
  export default user

getter.js:

const getters={
 name:state=>state.user.name,
 token:state=>state.user.token
}
export default getter

4、在utils里的auth.js里对cookies进行操作,写入,读取,删除用户权限,是否登录的标志等

import Cookies from 'js-cookies'
export function setName(name) {
 return Cookies.set("name", name);
}
export function getName() {
 return Cookies.get("name");
}
export function setToken(token) {
 return Cookies.set("token", token);
}
export function getToken() {
 return Cookies.get("token");
}

5、在permission.js里写白名单,对白名单以外的跳转进行拦截然后跳转登录,同时判断用户权限,是否登录,等

import router from './router'
import store from './store'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
import {Message} from 'element-ui'
import {getName, getToken} from "@/utils/auth"; // 验权
const whiteList = ['/login', '/regist']; // 不重定向白名单
router.beforeEach((to, from, next) => {
 NProgress.start();
 if (whiteList.indexOf(to.path) !== -1) {
 next();
 } else {
 if (getToken()==="true") {
  next();
  NProgress.done()
 } else {
  next({path: '/login'});
  NProgress.done()
 }
 }
})
router.afterEach(() => {
 NProgress.done() // 结束Progress
})

6、utils里的request.js里写拦截码,对后端返回的特定码进行拦截然后做相应的操作

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
// 创建axios实例
const service = axios.create({
 baseURL: process.env.BASE_API, // api的base_url
 timeout: 15000     // 请求超时时间
});
// respone拦截器
service.interceptors.response.use(
 response => {
 /**
 * code为非200是抛错 可结合自己业务进行修改
 */
 const res = response.data;
 //const res = response;
 if (res.code !== '200' && res.code !== 200) {
  if (res.code === '4001' || res.code === 4001) {
  MessageBox.confirm('用户名或密码错误,请重新登录', '重新登录', {
   confirmButtonText: '重新登录',
   cancelButtonText: '取消',
   type: 'warning'
  }).then(() => {
   store.dispatch('FedLogOut').then(() => {
    location.reload()// 为了重新实例化vue-router对象 避免bug
   })
  })
  }
  if (res.code === '4009' || res.code === 4009) {
  MessageBox.confirm('该用户名已存在,请重新注册!', '重新注册', {
   confirmButtonText: '重新注册',
   cancelButtonText: '取消',
   type: 'warning'
  }).then(() => {
   store.dispatch('FedLogOut').then(() => {
   location.reload()// 为了重新实例化vue-router对象 避免bug
   })
  })
  }
  return Promise.reject('error')
 } else {
  return response.data
 }
 },
 error => {
 Message({
  message: error.message,
  type: 'error',
  duration: 5 * 1000
 });
 return Promise.reject(error)
 }
)
export default service

以上就是登录注册的核心部分,写的不对的地方请指教

这篇vue+vuex+axios实现登录、注册页权限拦截就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
jQuery拖动图片删除示例
May 10 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
vue内置指令详解
Apr 03 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 #Javascript
vue + vuex todolist的实现示例代码
Mar 09 #Javascript
vue实现在表格里,取每行的id的方法
Mar 09 #Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 #Javascript
vue的安装及element组件的安装方法
Mar 09 #Javascript
11行JS代码制作二维码生成功能
Mar 09 #Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 #Javascript
You might like
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
Python实现简单字典树的方法
2016/04/29 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
用python计算文件的MD5值
2020/12/23 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
百度软件工程师职位
2013/02/14 面试题
2014年社区民政工作总结
2014/12/02 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
物业接待员岗位职责
2015/04/15 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
详解Go与PHP的语法对比
2021/05/29 PHP
Python读写yaml文件
2022/03/20 Python
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers