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

下面小编就为大家分享一篇vue+vuex+axios实现登录、注册页权限拦截,具有很好的参考价值,希望对大家有所帮助。一…

下面小编就为大家分享一篇vue+vuex+axios实现登录、注册页权限拦截,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在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

 
    
     
      
      

登录

登录

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

以上就是vue+vuex+axios实现登录、注册页权限拦截的详细内容,更多请关注www.cfluntan.cn其它相关文章!

为您推荐

返回顶部