vue路由守卫

最新推荐文章于 2025-08-11 23:19:59 发布

hl0406

最新推荐文章于 2025-08-11 23:19:59 发布

阅读量183

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_45869811/article/details/127871807

该博客介绍了如何在前端应用中实现本地存储的封装，包括获取、设置、移除和清空存储项，并展示了如何在路由守卫中使用这些方法来判断用户是否已登录，实现权限控制。当用户携带sell_token时允许通过，否则根据路径决定是否跳转到登录页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步在

// 封装本地存储的方法
export default {
  // getItem 需要返回值
  get(key) {
    // 携带参数
    return JSON.parse(window.localStorage.getItem(key));
  },
  // setItem 设置不需要返回
  set(key, value) {
    window.localStorage.setItem(key, JSON.stringify(value));
  },
  // removeItem
  remove(key) {
    window.localStorage.removeItem(key);
  },
  // clear 清空
  clear() {
    window.localStorage.clear();
  },
  // 判断是否有对应的名称值
  iskey(key) {
    return window.localStorage.getItem(key) ? true : false;
  },
};

第二步在路由里面引入

第三步编写路由守卫

router.beforeEach((to, from, next) => {
  if (local.iskey("sell_token")) {
    // sell_token
    next(); //放行 你不用担心,后台会匹配当前你的token中携带的用户和你当前登录的用户名是否一致
  } else if (to.path == "/login") {
    //没有登录有两种 一种是就是去登录的
    next(); //放行
  } else {
    //第二种  没有登录,而且也不去登录页,就是想去你的列表
    next("/login");
  }
});