一、路由拦截
登录拦截逻辑
第一步：路由拦截
首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，
否则就进入登录页面。
const routes = [
{
path: '/',
name: '/',
component: Index
},
{
path: '/repository',
name: 'repository',
meta: {
requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
在Vue.js应用中，前端实现登录拦截主要涉及两个关键步骤：路由拦截和HTTP拦截。这两种方式结合使用，可以确保用户在未登录或登录状态失效时，无法访问受保护的资源。
**一、路由拦截**
路由拦截是前端实现登录检查的第一道防线。在Vue Router中，可以通过`beforeEach`全局导航守卫来实现这一功能。在定义路由时，为需要登录才能访问的路由添加一个自定义字段`requireAuth`。例如：
```javascript
const routes = [
{ path: '/', name: '/', component: Index },
{
path: '/repository',
name: 'repository',
meta: { requireAuth: true }, // 需要登录的路由
component: Repository
},
{ path: '/login', name: 'login', component: Login }
];
```
接着，在`router.js`中配置`beforeEach`钩子函数，用于判断即将访问的路由是否需要登录权限：
```javascript
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {
if (store.state.token) {
next(); // 已登录，允许访问
} else {
next({
path: '/login',
query: { redirect: to.fullPath } // 登录成功后跳转的路由
});
}
} else {
next(); // 不需要登录，直接访问
}
});
```
这个钩子函数会检查`to.meta.requireAuth`，如果为`true`，则检查Vuex中是否存在`token`。如果存在，用户可以继续访问；如果不存在，则引导用户去登录页面。
**二、HTTP拦截器**
路由拦截虽然能防止用户直接访问路由，但不能处理已登录但令牌失效的情况。因此，我们需要使用HTTP拦截器，如Axios的拦截器，来处理这种情况。HTTP拦截器可以在发送请求和接收响应时执行统一的操作。
配置请求拦截器，检查并添加token到请求头：
```javascript
axios.interceptors.request.use(config => {
if (store.state.token) {
config.headers.Authorization = `Bearer ${store.state.token}`;
}
return config;
}, err => {
return Promise.reject(err);
});
```
然后，配置响应拦截器，检查服务器返回的状态码。如果收到401（未授权）错误，清除token并重定向至登录页：
```javascript
axios.interceptors.response.use(response => {
return response;
}, error => {
if (error.response) {
switch (error.response.status) {
case 401:
store.commit('LOGOUT'); // 清除token
router.replace({
path: 'login',
query: { redirect: router.currentRoute.fullPath } // 登录成功后跳转的路由
});
break;
// 其他错误处理...
}
}
});
```
这种方式确保即使用户尝试访问受保护的资源，如果其令牌已失效，也会被强制重新登录。
总结来说，前端实现登录拦截的两种方式结合使用，可以有效保护应用程序的安全性，防止未授权的访问。路由拦截用于在导航过程中检查权限，而HTTP拦截器则负责监控网络请求的响应，处理可能的登录状态失效问题。通过这种方式，可以提高用户体验，同时确保应用的安全性。
