Node.js 我需要验证用户名和密码才能进入仪表板,如果用户未登录,还需要重定向到登录页面

Node.js 我需要验证用户名和密码才能进入仪表板,如果用户未登录,还需要重定向到登录页面,node.js,validation,vue.js,redirect,vue-material,Node.js,Validation,Vue.js,Redirect,Vue Material,从vue2转换导入{SlideYDownTransition}; 从@/组件导入{LoginCard}; 导出默认值{ 组成部分:{ 罗金卡, 滑动向下转换 }, 资料{ 返回{ 用户名:, 密码: }; }, 创建:函数{ 这是checkCurrentLogin }, 更新{ if!localStorage.token&&this.$route.path!=='/login'{ 此。$router.replacethis。$route.path } }, 方法:{ checkCurrentLo

从vue2转换导入{SlideYDownTransition}; 从@/组件导入{LoginCard}; 导出默认值{ 组成部分:{ 罗金卡, 滑动向下转换 }, 资料{ 返回{ 用户名:, 密码: }; }, 创建:函数{ 这是checkCurrentLogin }, 更新{ if!localStorage.token&&this.$route.path!=='/login'{ 此。$router.replacethis。$route.path } }, 方法:{ checkCurrentLogin{ 如果localStorage.token{ this.$router.replacethis.$route.query | |'/login' } }, 登录:函数{ 这是axios .post,{user:this.username,password:this.password} .thenrequest=>this.loginsucessfulRequest .catch=>this.login失败; }, 登录成功请求{ if!req.data.token{ 此.login失败; 回来 } localStorage.token=req.data.token; 这个错误=false; this.$router.replacethis.$route.query.redirect | |/dashboard; }, 登录失败{ this.error=登录失败!; 删除localStorage.token; }, 登录:函数{ 此.$router.pushdashboard; }, } }; .md卡.md卡操作{ 边界:无; 宽度:350px; } 联络 登录 用户名: 密码: 登录
我想建议你下面的解决方案

我们可以有一个单独的用户名和密码登录页面 在用户插入用户名和密码后,可以像上面那样进行api调用 成功登录后,您可以像以前一样存储用户令牌

每个路由都可以检查用户令牌是否过期

为此,请使用内置路由器功能router.beforeach 该代码将执行每个路由,如果用户未登录或令牌在用户进入应用程序的仪表板之前或之后过期,则可以重定向到登录页面 main.js 路由器.js
在vue.js项目中,如果使用vue cli并使用以下命令创建项目,则应该有一个用于路由的文件。默认情况下,vue create将添加该文件,否则,您必须手动添加该文件以进行路由配置。您的代码应该在该文件中。我已经用一些代码示例更新了上述答案。请检查一下,非常感谢。这真的很有帮助。它正在工作。
import router from './router'

new Vue({
  router, render: h => h(App)
}).$mount('#app')
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',      
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach(async (to, from, next) => {
  const isAuthenticated = true; // add valid check here
  try {  
    if (isAuthenticated) {
      next();
    } else {
      next('/login');
    }
  } catch (e) {
    console.error('router : ', e);
  }
});

export default router