登录状态保持

登录状态保持
  1. 导入三方模块 jsonwebtoken ,这个模块用来创建加密的身份令牌 token

token可以设置过期时间,并不是token字符串消失了,只是不能用了,所以有效期到了,必须在服务器重新生成一个新的token。重新登录本地存储。在token身份令牌有效期间,客户端可以通过这个令牌对服务器进行一些请求操作,这个token字符串就相当于你的账号密码

在登录接口中传给前端,

//借助第三方包 jsonwebtoken 生成token字符串
 //jwt.sign( 加密的数据 , 密钥 , { 算法, 过期时间 } )
var token = jwt.sign( { phone }, "1234", { algorithm:'HS256',expiresIn: 60 } )
//登陆成功时, 可以一并返回 登陆成功的用户信息,登陆令牌
res.send( {code:200, msg:'登陆成功!',userinfo: arr[i], token } );
  1. 前端登录成功后立即将从后端拿到的token存入到本地存储
  //将token存储到了localStorage中

 localStorage.setItem('token',res.data.token);
  1. 前端在需要token令牌才能操作的页面全局设置axios拦截器
// 设置全局axios拦截
axios.interceptors.request.use( // 在ajax请求前把你给拦住,给你的请求头中加个参数
(config)=>{// 每次请求到服务器  前  都会执行
   // 设置请求头参数
   config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token');
   return config
},
(error)=>{
   return Promise.reject(error)
}
)
//axios全局设置 响应拦截器
axios.interceptors.response.use( 
    (res)=>{  //这个回调函数 在每次请求从服务器端返回到浏览器之前 都会调用执行
        return res;
    },
    (error)=>{ //每次请求发生错误, 都会调用执行

        if( error.response.status == 401 ){
            alert('登陆过期!需要重新登录');
            localStorage.removeItem('token');
           location.href = './login.html';

        }else if( error.response.status == 404 ){
            alert('访问路径有误!');
       }else if( error.response.status == 500 ){
            alert('服务器内部错误!');
       }

        return Promise.reject(error)
    }
)
  1. 后端设置token令牌验证中间件
npm i express-jwt
//导入外部模块
const {expressjwt} = require('express-jwt')

// 注意放到托管静态资源中间件后面,如果放到了静态资源中间件前面,先验证中间件,但是静态资源还没有发请求,还没有那个Authorizationd
// 设置token验证中间件 
app.use(expressjwt({
    secret:'1234',//密钥
    algorithms:["HS256"] //加密算法,可以写多个
}))
  1. 后端设置验证白名单
npm i express-jwt
//导入外部模块
const {expressjwt} = require('express-jwt')
   // 注意放到托管静态资源中间件后面,如果放到了静态资源中间件前面,先验证中间件,但是静态资源还没有发请求,还没有那个Authorizationd
   // 设置token验证中间件 
   app.use(expressjwt({
    secret:'1234',//密钥
    algorithms:["HS256"] //加密算法,可以写多个
}).unless({path:['/user/login','/user/register']}))