Vue单文件组件中localStorage使用及登录路由跳转异常解决

嘿，作为Vue新手碰到这个问题太正常啦！咱们核心思路就是用localStorage把登录状态存在浏览器里，再配合Vue Router的路由守卫，自动判断用户有没有权限访问对应页面，这样手动改URL也没用啦～

第一步：修改登录逻辑，保存登录状态 #

你现在的登录成功后只做了路由跳转，没把登录状态存下来。咱们在授权成功的时候，把登录状态写到localStorage里：

methods: { 
  login() { 
    if (this.input.username !== '' && this.input.password !== '') { 
      this.$http.post('http://www.example.com/test', { 
        name: this.input.username, 
        password: this.input.password 
      }) 
      .then((response) => { 
        this.items = response.data; 
        if (this.items === 'You are authorised') {
          // 把登录状态存入localStorage，值用字符串（因为localStorage只能存字符串）
          localStorage.setItem('isLoggedIn', 'true');
          // 可选：顺便存个用户名，欢迎页可以直接调用显示
          localStorage.setItem('currentUser', this.input.username);
          this.$router.push('/welcome');
        }
      }) 
    } 
  }, 
  mounted() { 
    // 这里提个小建议：mounted里自动调用login不太合理，应该给登录按钮绑定click事件，比如<button @click="login">登录</button>，不然页面一加载就发登录请求啦
    // this.login(); 
  } 
}

第二步：添加路由守卫，控制页面访问权限 #

接下来要在路由配置里加个全局守卫，每次路由跳转前都检查登录状态：

假设你的路由文件是router/index.js，修改成这样：

import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/components/Login'; // 你的登录组件路径
import Welcome from '@/components/Welcome'; // 你的欢迎页组件路径

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', name: 'Login', component: Login },
    { path: '/welcome', name: 'Welcome', component: Welcome }
  ]
});

// 全局前置路由守卫，每次跳转前触发
router.beforeEach((to, from, next) => {
  // 从localStorage获取登录状态，转成布尔值判断
  const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';

  // 如果用户要去登录页，但已经登录了，直接跳欢迎页
  if (to.path === '/login' && isLoggedIn) {
    next('/welcome');
  }
  // 如果用户要去欢迎页，但没登录，强制跳登录页
  else if (to.path === '/welcome' && !isLoggedIn) {
    next('/login');
  }
  // 其他情况正常放行
  else {
    next();
  }
});

export default router;

额外小提示 #

1. 退出功能：如果以后加退出按钮，记得清除localStorage里的状态：localStorage.removeItem('isLoggedIn')或者localStorage.clear()，然后跳回登录页。
2. 安全注意：localStorage是明文存在浏览器里的，绝对不能存密码、token这类敏感信息！这里只存登录状态和非敏感的用户信息就好。
3. 状态判断：如果你的后端返回的是用户信息而不是字符串，那判断逻辑可以改成检查返回的用户信息是否有效，再存状态。

这样改完之后，就算手动把URL改成/login，路由守卫会发现你已经登录了，自动跳回欢迎页；如果没登录就想访问/welcome，也会被拦回登录页～

内容的提问来源于stack exchange，提问作者Shibu Mathai