vue利用路由控制实现登录功能
未使用服务器接口,登录信息保存在cookie中,可以实现登录功能vue交流群203849104vue使用cookie首先需要安装cookienpm install js-cookie然后在router下面的index.js文件中引入import cookies from 'js-cookie'增加路由权限router.beforeEach((...
·
未使用服务器接口,登录信息保存在cookie中,可以实现登录功能
vue交流群203849104
vue使用cookie首先需要安装cookie
npm install js-cookie
然后在router下面的index.js文件中引入
import cookies from 'js-cookie'
增加路由权限
router.beforeEach((to, from, next) => {
iView.LoadingBar.start()
if (to.name === 'login') {
var gourl = '/'
} else {
gourl = to.path
}
var user = typeof (cookies.get('user'))
if (to.name === 'login' || to.name === 'register') {
if (to.meta.title) {
document.title = to.meta.title
}
next()
} else {
if (user === 'undefined') {
router.replace({
name: 'login',
query: {redirect: gourl}
})
} else {
window.scrollTo(0, 0)
if (to.meta.title) {
document.title = to.meta.title
}
next()
}
}
})
router.afterEach(route => {
iView.LoadingBar.finish()
})
router.beforeEach 是页面加载之前,相反router.afterEach是页面加载之后
这里的gourl 是登陆页面之前的页面,用于登录之后跳转到上一页面,这一点在应用开发中应用的也是比较广泛的,尤其是互动性比较强的应用。
typeof (cookies.get(‘user’)) 是用户cookie保存的用户信息,这里写的比较简单 判断了是否为字符串,可以根据需求自己来写
如果获取cookie中user的值不为string,则页面跳转到登录界面。
loginaction () {
var redirect = this.$route.query.redirect
this.$http.post(api.url.login, this.inputval, {emulateJSON: true}).then(
(response) => {
if (response.data.code === 'ok') {
cookies.set('user', response.data.data)
this.$router.push({ path: redirect })
} else {
this.$Message.error(response.data.msg)
}
},
(error) => {
console.log(error)
})
}
loginaction 方法是登录按钮的点击事件
api.url.login 是post请求地址可以换成自己的地址
this.inputal是输入框输入的信息
请求接口返回code为OK则表示登录成功将返回的数据写入cookie中即可
redirect 是登录页面的redirect 参数,也就是跳转到登录页面前一页的地址,那么登录之后还是返回到登录之前的页面。
更多推荐
已为社区贡献1条内容
所有评论(0)