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 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
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
apache rewrite_module模块使用教程
2008/01/10 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
使用PHP开发留言板功能
2019/11/19 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
python实现人民币大写转换
2018/06/20 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
css3发光搜索表单分享
2014/04/11 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
获奖的大学生创业计划书
2014/01/05 职场文书
八年级语文教学反思
2014/02/11 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
会计求职简历自我评价
2015/03/10 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
离职告别感言
2015/08/04 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书