vue实现登陆登出的实现示例

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

在登陆提交处mcMoFEAcCM还得对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:

http://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

thttp://his.$confirm('您确定要退出吗?', '退出管理平台', {

confirmButtonText: '确定',

cancelButtonText: '取消'

}).then(() => {

const info = {

'userkey': localStorage.getItem('userKey')

}

self.$store.dispatch('LogOut', info).then(() => {

self.$router.push({ path: '/login' })

}).catch(() => {

})

}).catch(() => {

})

}

简单的登陆登出结束啦～

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。