vue实现登陆登出的实现示例
最近接手的B端项目选择了vue来做,此项目使用element ui Message等为组件 望周知
为企业提供网站建设、网站设计、网站优化、全网营销推广、竞价托管、品牌运营等营销获客服务。创新互联公司拥有网络营销运营团队,以丰富的互联网营销经验助力企业精准获客,真正落地解决中小企业营销获客难题,做到“让获客更简单”。自创立至今,成功用技术实力解决了企业“网站建设、网络品牌塑造、网络营销”三大难题,同时降低了营销成本,提高了有效客户转化率,获得了众多企业客户的高度认可!
需求
- 登陆成功后跳转至首页
- 首页不能手动跳转至登陆页
- 登陆后跳转至目标页面
此次B端SPA项目把ak存在localstorage中
1.登陆的跳转利用全局钩子router.beforeEach
//router.js router.beforeEach((to, from, next) => { // 若userkey不存在并且前往页面不是登陆页面,进入登陆 // 若userkey存在并且前往登陆页面,进入主页 const userKey = localStorage.getItem('userKey') if (!userKey && to.path !== '/login') { next({ path: '/login', query: { redirect: to.fullPath } }) } else if (userKey && to.path === '/login') { next({ path: '/' }) } else { next() } })
上面使用了query带上目标参数
例子:#/login?redirect=%2Fapp
在登陆提交处还得对redirect参数进行处理
//若验证成功跳转 var redirect = decodeURIComponent(this.$route.query.redirect || '/') self.$router.push({ // 你需要接受路由的参数再跳转 path: redirect })
需求
若ak失效后发送请求时弹出失效弹出框返回到登陆页面
以下做了个简单的例子若请求返回的参数带0则登陆失效
// respone拦截器 axios.interceptors.response.use( response => { console.log(response) const data = response.data if (data.status === 0) { MessageBox.alert('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', { confirmButtonText: '确定', type: 'warning' }).then(() => { localStorage.clear() router.replace({ path: '/login' }) return }).catch(() => { localStorage.clear() router.replace({ path: '/login' }) }) } else { return response } }, error => { if (error && error.response) { switch (error.response.status) { case 400: error.message = '请求错误' break case 401: error.message = '未授权,请登录' break case 403: error.message = '拒绝访问' break case 404: error.message = (process.env.NODE_ENV === 'production' ? `请求地址出错` : `请求地址出错: ${error.response.config.url}`) break case 408: error.message = '请求超时' break case 500: error.message = '服务器内部错误' break case 501: error.message = '服务未实现' break case 502: error.message = '网关错误' break case 503: error.message = '服务不可用' break case 504: error.message = '网关超时' break case 505: error.message = 'HTTP版本不受支持' break default: } Message({ message: error.message, type: 'error', duration: 5 * 1000 }) } return Promise.reject(error) } )
需求
手动登出
loginOut() { var self = this this.$confirm('您确定要退出吗?', '退出管理平台', { confirmButtonText: '确定', cancelButtonText: '取消' }).then(() => { const info = { 'userkey': localStorage.getItem('userKey') } self.$store.dispatch('LogOut', info).then(() => { self.$router.push({ path: '/login' }) }).catch(() => { }) }).catch(() => { }) }
简单的登陆登出结束啦~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
当前文章:vue实现登陆登出的实现示例
当前地址:http://myzitong.com/article/pcshod.html