前端登录业务

1.用户登录成功拿到token，放在请求拦截器的请求头中，调用户接口才可以获取到用户信息，存储到仓库中，以便其他组件使用用户信息
2.退出登录需要清空用户数据，以及本地存储，调退出登录接口告诉服务器当前token失效，并跳转到登录页面
3.退出登录以后再登录需要回到上次退出前的页面，而不是统一回到首页，可以在退出登录的时候跳转登录页面时在路径上携带query参数，参数名为redirect，参数值就是退出前页面的路径，在登录成功后跳转时判断当前路径是否有redirect参数，有则跳转到redirect路径，否则跳转到首页
4.路由鉴权：
用户未登录：可以访问login，其余路由不能访问(指向login)
用户登录成功：不可以访问login[指向首页]，其余的路由可以访问

在根目录下创建一个permission.ts文件，代码如下：

//路由鉴权:鉴权,项目当中路由能不能被的权限的设置(某一个路由什么条件下可以访问、什么条件下不可以访问)
import router from "@/router";
import setting from "./setting";
//引入进度条
import nprogress from "nprogress";
//引入进度条样式
import "nprogress/nprogress.css";
//进度条初始化
nprogress.configure({ showSpinner: false });
//获取用户相关的小仓库内部token数据，判断用户是否登录成功
import useUserStore from "./store/modules/user";
import pinia from "./store";
let userStore = useUserStore(pinia);

//全局守卫:项目当中任意路由切换都会触发的钩子
//全局前置守卫
router.beforeEach(async (to, from, next) => {
  document.title = `${setting.title}-${to.meta.title}`;
  //访问某一个路由之前守卫
  //to:你将要访问那个路由
  //from:你从来个路由而来
  //next:路由的放行函数
  nprogress.start();
  //获取token，去判断用户登录还是未登录
  let token = userStore.token;
  //获取用户名
  let username = userStore.username;
  //用户登录判断
  if (token) {
    //登录成功，不能访问login,指向首页
    if (to.path == "/login") {
      next({ path: "/" });
    } else {
      //登录成功访问其余路由（登录排除）
      //有用户信息
      if (username) {
        next();
      } else {
        try {
          await userStore.userInfo();
          next();
        } catch (error) {
          //token过期
          //用户手动修改本地存储token
          //退出登录-用户相关的数据清空
          userStore.userLogout();
          next({ path: "/login", query: { redirect: to.path } });
        }
      }
    }
  } else {
    console.log(222);
    //用户未登录判断
    if (to.path == "/login") {
      next();
    } else {
      next({ path: "/login", query: { redirect: to.path } });
    }
  }
});
//全局后置守卫
router.afterEach((to, from, next) => {
  nprogress.done();
});

//第一个问题：任意路由切换实现进度条业务 ---nprogress
//第二个问题：路由鉴权(路由组件访问权限的设置)
//全部路由组件：登录|404|任意路由|首页|数据大屏|权限管理（三个子路由)|商品管理(四个子路由)

//用户未登录：可以访问login，其余六个路由不能访问(指向login)
//用户登录成功：不可以访问login[指向首页]，其余的路由可以访问

【注】：在外部文件访问仓库里的数据需要先引入pinia

//获取用户相关的小仓库内部token数据，判断用户是否登录成功
import useUserStore from "./store/modules/user";
import pinia from "./store";
let userStore = useUserStore(pinia);