前端鉴权、路由守卫

一、前端携带参数给后端的几种方法

①查询参数？后面携带的

②路径参数：后面携带的也就是我们常说的query的

③请求头携带

④请求体携带

axios({
   method:'PUT',
  //路径参数
   url:'/products/'+100,
  //查询参数（axios比较特殊）
   params:{
      page:1,
      perPage:10,},
//请求头
  headers:{
    'X-Hahaha':'666',},
//请求体
  data:{
     name:1,
     age:2,},
})


完整的url
PUT /products/100?page=1&perPage=10

后端拿到请求头参数
  request.headers['x-hahaha']
后端拿到请求体参数
request.body.name
后端拿到查询参数
request.query.page//1
后端拿到路径参数
request.params.id//100

二、状态码

状态码400可能是四种参数错误或者是输入的参数错误少传或者没传

401一般会是后端校验token失败

403无权限

404资源不存在，检查自己接口是否错误了

503超载

三、保护前端页面（避免用或通过拼接url直接跳转）

1.点击enter直接登陆

@keyup.enter.native

2.如果一个没填不能登陆可以通computer中的boolean来决定

可以在前后的route里的meta设置一些不同管理员能用的不同权限

通过前端路由守卫来确定 

to代表了要跳转进去的页面b，from代表第一个页面的各种信息，next相当于跳转

//前端路由守卫
router.beforeEach((to,from,next)=>{
   //获取token
   const token = localStorage.getItem('token')
   //如果没有登录并且没有token跳转到登录页
   if(to.name!=='Login'&&!token) next({name:'Login'}
else next()
})

 参考​​ ​​​​​ 

        

 

 前端鉴权

 

可以在route里面协商meta，来吧角色用数组存储起来，然后传递出去，接收到的可以放在store进行存储

 2、路由不能写死