路由守卫+请求拦截+响应拦截

1 介绍

1 路由守卫

• 没有登录的用户不能直接进入主页面(包括其他页面)
  • 可以重定向到登录页面
  • 判断依据为是否有token
• 只针对前端对页面路由的跳转操作

2 请求拦截

3 响应拦截

• 响应拦截一些状态码并返回响应的提示信息

2 配置

1 路由守卫的配置

• 定义路由位置配置
  • 项目的根目录下存放路由的文件夹
  • router/index.js

router.beforeEach((to, from, next) => {
  if (to.path !== '/login') {
    const token = localStorage.getItem('token')
    if (!token) {
      next('/login')
    }
    next()
  }
  next()
})

2 请求拦截配置

2.1 前端配置

• 发送请求接口的时候配置
• 项目的根目录下 api/index.js
• 要求baseUrl为分离模式axios.defaults.baseURL = 'http://127.0.0.1:3000'

axios.interceptors.request.use(function (config) {
  const token = localStorage.getItem('token')
  config.headers.common['Authorization'] = `Bearer ${token}`//设置请求头
  return config;
}, function (error) {
  // 失败后的操作
  return Promise.reject(error);
});

2.2 后端验证

1 配置

• 在编写接口的文件夹下router/index.js

async function auth(req, res, next) {
  let token = req.headers.authorization.split(' ').pop() || ''//保持与前端一致
  let { _id } = jwt.verify(token, 'miyao')//加密的秘钥进行验证
  req.id = _id
  next()
}

2 使用

• 使用mongodb数据库和mongoose依赖

 router.get('/users', auth, async (req, res) => {
    const users= await users.find()
    if(!users){
    res.send({status:-200})
    }
    res.send({status:200,msg:'ok'})
  })

3 响应拦截配置

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  if (error.response.status == -200) {
      Message.error('查找用户失败！')
  }
  return Promise.reject(error);
});