海珠区网站建设营销网页

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);