全栈开发学习(Node+Vue+Mongodb)(七)——登录页面

1 新建管理员账户模块

  • 新建管理员模型,需要提前在server中安装模块bcryptjs: npm i bcryptjs,用于密码散列
const schema=new mongoose.Schema({
   
    //字段以及字段类型
    username:{
   type:String},    
    password:{
   
        type:String,
        select:false,//密码默认查不出来
        set(val){
   
            return require('bcryptjs').hashSync(val,12)  //设置密码散列
        }
    },    
})
  • 后台管理页面添加新增/编辑管理员、管理员列表页面,这里不再赘述

2 登录页面搭建

  • 新建login路由,和Main平级
 {
    path: '/login', name: 'login', component: Login, meta: {
    isPublic: true } }
  • 新建Login组件,前端页面搭建这里不详细说明,说一下执行前端请求的login()函数
async login(){
   
     const res=await this.$http.post('login',this.model);
    //将后台返回的token写入浏览器的存储,下次打开浏览器仍然存在;用sessionStorage下次打开就不存在
     localStorage.token=res.data.token  
     //清空浏览器保存的token 用localStorage.clear
     this.$router.push('/')
     this.$message({
   
       type:'success',
       message:'登录成功'
     })
    }

3 全局捕获错误

我们登陆页面的前端发送的请求都先经过我们的http拦截器,拦截器的写法参考axios官方文档。

  • http-request拦截器

    http
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值