创新设计记录-3：路由守卫与请求拦截

创新设计记录-3：路由守卫与请求拦截器

在未登录之前，不管是管理员还是用户，都不应该出现在url栏中输入路由然后就跳转到对应页面的情况，必须要登录之后，才可以访问页面

路由守卫

vue-router组件带有原生的路由守卫

<script>
const router = createRouter({ ... })

router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})
</script>

我们也需要配置一个全局的路由守卫

在main.js中配置的全局路由守卫，实现了除登录页面外的其他界面，在未登录的状态下会自动重定向到登录界面，这样保证系统的安全性：

router.beforeEach((to, from, next) => {
    // 没有登录状态下只允许访问register 和 login页面
    let logged_in = store.state.logged_in || localStorage.getItem('islogin') == 'true'
    if (except_path.includes(to.path)) {
        next()
    }
    else
        if (!logged_in && to.meta.requireLogin) {
            console.log('main.js:router:', to.name, '没有登录');
            ElMessage({
                message: '请登录',
                type: 'error'
            })
            next({ name: 'login' })
        } else {
            next()
        }
})

当未登录访问页面是，会出现下面的提示

请求拦截器

系统有管理员和用户两种身份，因此必须将两者的服务隔离，即用户不能请求管理员的方法， 管理员可以请求用户的方法。

后端由其他同学配置了token验证，前端只需要在请求之前，添加一个拦截器，将请求的头中的Authorization项添加上token即可，与路由守卫一样，将注册和登录方法排除在外

import { reuqest } from './service/authService'
request.interceptors.request.use(function (config) {
    if (localStorage.getItem('token') && localStorage.getItem('token') != "")
        config.headers["Authorization"] = "Bearer " + localStorage.getItem('token')
    return config
})

登录注册的axios实例采用的是authRequest:

export const authRequest = axios.create({
    baseURL: url,
    headers: {
        'Content-Type': 'application/json'
    }
})
function login(data) {
    return authRequest.post('/user/login', data)
}

ion login(data) {
return authRequest.post(‘/user/login’, data)
}