如何使用 localStorage 进行重定向展示页面

localStorage 用于在浏览器中存储数据，无法直接实现重定向展示页面。如果您想要进行页面重定向，可以使用 JavaScript 中的 window.location 属性，将要跳转的页面 URL 赋值给该属性即可实现页面重定向。例如，使用以下代码实现页面重定向：

// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
var value = localStorage.getItem('key');
// 页面重定向
window.location = 'http://www.example.com'

相关问题

vue 路由守卫 当页面没有Token时 跳转 登录页 代码

### 回答1：

当检测到页面没有Token时，可以使用Vue路由守卫来实现跳转到登录页面，具体代码如下：router.beforeEach((to, from, next) => {if (!token) {next({ path: '/login' })} else {next()}})

### 回答2：
在Vue中，可以通过路由守卫来控制页面的访问权限。当页面没有Token时，可以通过路由守卫来自动跳转到登录页。

首先，需要在项目中安装vue-router，可以使用以下命令进行安装：

npm install vue-router

然后，在路由配置文件中设置路由守卫。假设登录页的路由路径为"/login"，可以在全局前置守卫中判断页面是否有Token，如果没有，则自动跳转到登录页。代码如下：

// 导入Vue和Vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'

// 安装Vue-router
Vue.use(VueRouter)

// 创建路由实例
const router = new VueRouter({
  // 路由配置
  routes: [
    // 其他页面的路由配置
    ...
    {
      path: '/login',
      component: Login
    }
  ]
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断是否有Token
  const token = localStorage.getItem('token') // 假设Token保存在localStorage中
  if (token) {
    // 有Token，允许访问页面
    next()
  } else {
    // 没有Token，跳转到登录页
    next('/login')
  }
})

// 导出路由实例
export default router

在上述代码中，我们在全局前置守卫中判断是否存在Token，如果存在，可以访问页面，如果不存在，会跳转到"/login"页面。

当访问其他需要权限的页面时，会先经过全局前置守卫，根据Token的存在与否执行相应的跳转逻辑。

### 回答3：
Vue路由守卫是一种在导航过程中控制页面访问权限的方法。当我们使用Vue框架开发前端应用时，可以通过路由守卫来监测用户是否具有正确的登录凭证（如Token），如果没有，则可以将用户重定向到登录页。

下面是一个简单的示例代码，展示了如何使用Vue路由守卫来实现上述功能：

在main.js文件中，我们需要引入Vue和Vue Router，并创建一个Vue实例，并使用Vue Router配置路由。

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

// 定义路由
const routes = [
  { path: '/login', component: Login },
  { path: '/dashboard', component: Dashboard }
]

// 创建路由实例
const router = new VueRouter({
  routes
})

// 添加路由守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token') // 假设我们的Token存在localStorage中

  // 如果用户访问的是登录页，则直接放行
  if (to.path === '/login') {
    next();
  } else {
    // 如果用户已经登录，则继续导航
    if (token) {
      next();
    } else {
      // 如果用户没有登录，则跳转到登录页
      next('/login');
    }
  }
})

// 创建Vue实例并挂载Router
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在上述代码中，我们首先定义了两个路由，一个是登录页（Login），一个是仪表盘页（Dashboard）。然后根据用户是否具有Token来控制页面访问权限，在beforeEach导航守卫中进行判断。如果用户访问的是登录页，则直接放行，否则再判断用户是否已经登录。如果用户已经登录，则继续导航到目标页面，否则将用户重定向到登录页。

这样，当页面没有Token时，就会自动跳转到登录页。

springboot+mybatisplus+vue实现登录验证成功后跳转至主页面

首先，你需要在后端编写一个登录验证接口，接收前端传来的用户名和密码，进行验证后返回一个 token。可以使用 Spring Security 框架进行安全认证。

在前端，你需要编写一个登录页面，使用 Vue.js 编写表单，将用户输入的用户名和密码传递给后端。当后端返回 token 后，你需要将其保存到前端的 sessionStorage 或 localStorage 中，以便后续的请求可以带上这个 token。

接着，你需要编写一个路由守卫，在用户访问主页面时进行 token 的验证。如果 token 不存在或者无效，就将用户重定向到登录页面。如果 token 有效，就将用户展示主页面。

在前端，你可以使用 Vue Router 来实现路由守卫。在后端，你可以使用拦截器来实现 token 的验证。下面是一个简单的示例代码：

后端登录接口：

@RestController
@RequestMapping("/api")
public class LoginController {
    @PostMapping("/login")
    public Result login(@RequestBody User user) {
        // 进行登录验证，返回 token
        String token = doLogin(user.getUsername(), user.getPassword());
        return Result.success(token);
    }
}

前端登录页面：

<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="handleSubmit">
      <div>
        <label>Username:</label>
        <input type="text" v-model="username" />
      </div>
      <div>
        <label>Password:</label>
        <input type="password" v-model="password" />
      </div>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async handleSubmit() {
      // 发送登录请求
      const { data } = await axios.post('/api/login', {
        username: this.username,
        password: this.password,
      });

      // 保存 token
      sessionStorage.setItem('token', data);
      this.$router.push('/main');
    },
  },
};
</script>

前端路由守卫：

router.beforeEach((to, from, next) => {
  const token = sessionStorage.getItem('token');

  if (to.name === 'Login') {
    // 如果是访问登录页面，就直接进入
    next();
  } else {
    if (!token) {
      // 如果 token 不存在，就重定向到登录页面
      next({ name: 'Login' });
    } else {
      // 如果 token 存在，就进入下一个路由
      next();
    }
  }
});

后端拦截器：

@Component
public class AuthenticationInterceptor extends HandlerInterceptorAdapter {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String token = request.getHeader("Authorization");
        if (token == null || !verifyToken(token)) {
            response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
            return false;
        }
        return true;
    }
}

最后，你需要编写一个主页面，展示用户的信息和功能。当用户点击退出按钮时，你需要清除保存在前端的 token，并将用户重定向到登录页面。