没有登录直接访问首页

  • 将登录成功之后的 token，保存到客户端的本地存储中。如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。
  1. // 在配置路由的文件中配置
  2. import Vue from 'vue'
  3. import VueRouter from 'vue-router'
  4. import api from '@/api';
  5. import store from '@/store';
  6. import { MessageBox } from 'element-ui';
  7. // 路由懒加载
  8. const RegisterView = () => import('../views/register/RegisterView.vue')
  9. import addRoute from '@/utils/addRoute.js'
  11. Vue.use(VueRouter)
  13. const routes = [
  14.   // 重定向
  15.   {
  16.     path: '/',
  17.     redirect: '/home'
  18.   },
  19.   {
  20.     path: '/login',
  21.     name: 'login',
  22.     // 路由懒加载
  23.     component: () => import('../views/login/LoginView.vue')
  24.   },
  25.   {
  26.     path: '/register',
  27.     name: 'register',
  28.     component: RegisterView
  29.   },
  30. ]
  32. const router = new VueRouter({
  33.   mode: 'history',
  34.   base: process.env.BASE_URL,
  35.   routes
  36. })
  37. // 全局前置守卫
  38. router.beforeEach(async (to, from, next) => {
  39.   // 进入首页时
  40.   if (to.path.includes('home')) {
  41.     // 本地有 token 时
  42.     if (localStorage.token) {
  43.       // 发送请求验证 token 是否有效
  44.       const res = await api.users.getInfo();
  45.       if (res && res.code) {
  46.         store.commit('SET_USER_INFO', res.data);
  47.         addRoute();    // 开始配置动态路由
  48.         next();
  49.       }
  50.     } else {
  51.       MessageBox.alert('请先登录', '提示', {
  52.         confirmButtonText: '确定',
  53.         callback: action => {
  54.           next('/login');
  55.         }
  56.       });
  57.     }
  58.   } else {
  59.     next();
  60.   }
  61. })
  62. export default router

已登录401

  • token过期，401报错时，需要提醒用户重新登录，并跳转到登录页面
    1. import axios from 'axios';
    2. import router from '@/router';
    3. // 公共路径
    4. axios.defaults.baseURL = 'http://47.98.128.191:3000';
    5. // 请求拦截器
    6. axios.interceptors.request.use(config => {
    7. const token = localStorage.getItem('token');
    8. if (token) {
    9.   config.headers.Authorization = localStorage.getItem('token');
    10. }
    11. return config;
    12. });
    13. // 响应拦截器
    14. axios.interceptors.response.use(res => {
    15. // 处理后端返回的数据格式，将 res.data 返回给组件
    16. return res.data;
    17. }, err => {
    18. if (err && err.response && err.response.status) {
    19.   if (err.response.status == 401) {
    20.     localStorage.removeItem('token');
    21.     alert('登录已过期，请重新登录');
    22.     router.push('/login')
    23.     return
    24.   }
    25. }
    26. // 对响应错误做处理
    27. return Promise.reject(err);
    28. })