后台管理系统登录思路

一般来说我们不管是做后台管理,还是做普通项目,必不可少的其实就是登录。那么登录又是怎么实现的呢?废话不多说,上代码。
首先我们把登录接口封装在一个文件里,如果这个接口有必备的参数,我们就得传参,然后在登录页引入调用。
其次就是我们在登录页写登录框信息,这时候就需要接收接口必备的参数,那具体怎么接呢?
先在data里设置两个放置参数的空数组。然后在登录信息框中外围prop接收,然后在信息框上v-model获取用户信息。
在一个就是当我们填完用户信息的时候做什么逻辑:首先就是调用封装好的登录接口,其次在登录成功后跳转到详情页。(如果是登录过的就把token存在本地)
那么问题又来了,怎么判断用户是否登录成功呢?
其实就是给全局加一个路由前置全局钩子函数,在函数里把用户登录的token在本地获取到,然后判断,当我们在本地找到这个用户时,如果这个用户token存在,就登录成功,否则就作废。(例子)

router.beforeEach((to, from, next) => {
console.log(‘to:’, to)
const token = localStorage.getItem(‘token’);
if (to.meta.Authorition) {
if (token) {
next()
} else {
router.push({name:‘Login’})
}
} else {
next()
}

})
那么这个栗子就是说如果我们从本地取到了token,那就继续下一步并且跳转到详情页,否则的话让他返回登录页或者报错。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值