全栈开发学习(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