判断token是否存在,根据是否存在进行放行

    1. / 前置路由守卫
    2. const whiteList = ['/login', '/404']
    3. router.beforeEach((to, from, next) => {
    4. const token = Cookies.get('token')
    5. // 如果存在 token
    6. if (token) {
    7.   if (to.path === '/login') {
    8.     // 如果存在 token，访问的是登录页面，直接跳转到主页
    9.     next('/')
    10.   } else {
    11.     // 如果存在 token，访问的是其他页面，直接放行
    12.     next()
    13.   }
    14. } else {
    15.   // 如果不存在 token，访问的是白名单内容，直接放行
    16.   if (whiteList.includes(to.path)) {
    17.     next()
    18.   } else {
    19.     // 没有 token，且不是白名单页面，跳转到登录页面
    20.     next('/login')
    21.   }
    22. }
    23. })
    1. / 拦截器
    2. instance.interceptors.request.use(config => {
    3.   const token = Cookies.get('token') as string;
    4.   if (token) {
    5.     if (config && config.headers) {
    6.       config.headers = config.headers || {}
    7.       config.headers.Authorization = `Bearer ${token}` as string;
    8.     }
    9.   }
    10.   return config;
    11. }, err => {
    12.   return Promise.reject(err);
    13. })
    15. instance.interceptors.response.use(response => {
    16.   if (response.data.success) {
    17.     return response.data
    18.   } else {
    19.     return Promise.reject(new Error(response.data.message))
    20.   }
    21. }, error => {
    22.   // 软件工程：程序健壮性，做多层的校验
    23.   if (error.response && error.response.data && error.response.data.code === 10002) {
    24.     // 当等于 10002 的时候，表示后端告诉我 token 超时了
    25.     // 登出action 删除token
    26.     Cookies.remove('token');
    27.   } else {
    28.     ElMessage.error(error.message) // 提示错误信息
    29.   }
    30.   // 对响应错误做点什么
    31.   return Promise.reject(error)
    32. })
    33. export default instance;