后台管理系统登录思路「建议收藏」

后台管理系统登录思路「建议收藏」一般来说我们不管是做后台管理,还是做普通项目,必不可少的其实就是登录。那么登录又是怎么实现的呢?废话不多说,上代码。首先我们把登录接口封装在一个文件里,如果这个接口有必备的参数,我们就得传参,然后在登录页引入调用。其次就是我们在登录页写登录框信息,这时候就需要接收接口必备的参数,那具体怎么接呢?先在data里设置两个放置参数的空数组。然后在登录信息框中外围prop接收,然后在信息框上v-model获取用户信息。在一个就是当我们填完用户信息的时候做什么逻辑:首先就是调用封装好的登录接口,其次在登录成功

大家好,又见面了,我是你们的朋友全栈君。

一般来说我们不管是做后台管理,还是做普通项目,必不可少的其实就是登录。那么登录又是怎么实现的呢?废话不多说,上代码。
首先我们把登录接口封装在一个文件里,如果这个接口有必备的参数,我们就得传参,然后在登录页引入调用。
其次就是我们在登录页写登录框信息,这时候就需要接收接口必备的参数,那具体怎么接呢?
先在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,那就继续下一步并且跳转到详情页,否则的话让他返回登录页或者报错。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/140718.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • C语言条件运算符_c语言数组长度可变吗

    C语言条件运算符_c语言数组长度可变吗如果希望获得两个数中最大的一个,可以使用if语句,例如:if(a>b){max=a;}else{max=b;}不过,C语言提供了一种更加简单的方法,叫做条件运算符,语法格式为:表达式1?表达式2:表达式3条件运算符是C语言中唯一的一个三目运算符,其求值规则为:如果表达式1的值为真,则以表达式2的值作为整个条件表达式的值,否则以表达式3…

    2022年10月4日
    4
  • mysql中TIMESTAMPDIFF简单记录

    mysql中TIMESTAMPDIFF简单记录1.  SyntaxTIMESTAMPDIFF(unit,begin,end);根据单位返回时间差,对于传入的begin和end不需要相同的数据结构,可以存在一个为Date一个DateTime2.Unit支持的单位有MICROSECOND SECOND 秒MINUTE 分钟HOUR  小时DAY  天WEEK 星期MONTH 月QUARTER 季度YEAR 年3.Examp…

    2022年5月22日
    30
  • FormatDateTime的用法

     FormatDateTime的用法声明:function FormatDateTime(const Format: string; DateTime: TDateTime): string; overload;当然和Format一样还有一种,但这里只介绍常用的第一种Format参数是一个格式化字符串。DateTime是时间类型。返回值是一种格式化后的字符串重点来看Format参数中的指令字符

    2022年4月8日
    62
  • 深度学习时GPU显存利用率高但是GPU利用率低的解决办法[通俗易懂]

    深度学习时GPU显存利用率高但是GPU利用率低的解决办法[通俗易懂]代码中添加:importosos.environ[“CUDA_DEVICE_ORDER”]=”PCI_BUS_ID”os.environ[“CUDA_VISIBLE_DEVICES”]=”0″//这里是自己的GPU编号,我是”0″,原文是”8″.

    2022年6月29日
    147
  • potplayer快捷键大全「建议收藏」

    potplayer快捷键大全「建议收藏」Shift+↑    声音->播放音量控制->主音量+Alt+↑     字幕->字幕风格->上移Ctrl+Alt+↑     声音->系统音量->波形音量+Ctrl+Alt+Shift+↑…

    2022年5月22日
    276
  • 单片机控制步进电机程序c语言正反转停止,51单片机控制步进电机的启动、停止、正转、反转…

    单片机控制步进电机程序c语言正反转停止,51单片机控制步进电机的启动、停止、正转、反转…51单片机控制步进电机的启动、停止、正转、反转用51单片机控制步进电机的启动、停止、正转、反转、两档速度和状态显示的目的,使步进电机控制更加灵活。步进电机驱动芯片采用ULN2803,ULN2803具有大电流、高电压,外电路简单等优点。利用四位数码管增设电机状态显示功能,各项数据更直观。实测结果表明,该控制系统达到了设计的要求。步进电机的原理图1是一种四相可变磁阻型的步进电机结构示意图。这种电机定子…

    2022年5月31日
    35

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号