未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

在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实现登录、注册页权限拦截就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。


您可能感兴趣的文章:vue+axios实现登录拦截的实例代码Vue.js实战之使用Vuex + axios发送请求详解Vue+axios 实现http拦截及路由拦截实例详细讲解vue2+vuex+axios

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: GitGitHub删除
tags: gt,lt,name,login,password,data,token,return,js,const,response,el,import,error
分页:12
转载请注明
本文标题:vue+vuex+axios实现登录、注册页权限拦截
本站链接:https://www.codesec.net/view/573631.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(150)