背景前端使用vue框架 + elementui框架，技术使用vue2 + vuecli + vue-router + axios 后端使用springboot框架需求用户未登录/登录失败，点左侧任何菜单项右侧均显示请求登录的提示，用户登录成功，点左侧菜单项显示相关内容目前情况已经通过vue-router实现点击菜单项跳转到指定页面，但是未实现对用户是否登录的鉴权需要解决的困难在前后端不分离的时候，通常使用后端通过拦截器验证session是否为null判断是否登录成功，若未登录则后端重定向到首页，若已登录则放行但是对于前后端分离项目，目前不知道如何鉴权并实现未登录自动跳到首页【鉴权目前打算使用token方式，但是不知道怎么拦截未登录用户并重定向到登录界面】

前后端分离如何实现用户鉴权？

3 个回答

得票最新

陟上晴明

20.9k124691

发布于
2022-09-30 浙江

更新于
2022-10-04

✓ 已被采纳

emmmm.... 就很迷，回答被折叠了。那我完整回答一下。

现在主流的前端权鉴是通过动态添加路由实现的前端权鉴，前端的路由表存在数据库中，后端按照当前登录的用户角色返回对应的用户可操作的路由表，然后通过 addRouters 去动态添加到 vue-router 中。
如果你喜欢 element 这个UI库的话，你可以看一下这个 admin 版 👉 Vue-Element-Admin，提供了完整的一套解决方案。
权鉴这部分具体思路可以参考这个文件 permission.js

如果不想自己手撸项目的话，可以直接使用 RuoYi 这个开源后台管理系统，前端是使用的 Vue + ElementUI，但是个人觉得它做的稍微差点意思。一是因为是个人项目维护力度稍微弱一些，二是因为作者是后端er，在对于前端的很多功能设计上面会有一些问题。
我之前是使用的 Jeecg Boot 这个开源项目，也同样有这样的问题。但是维护的力度会稍微好一些，对于不过UI库是 AntDesign of Vue，会比 ElementUI 更好一些，毕竟 Ele 已经算是废弃状态了，但是AntD Vue 可能对于一些对于前端不太熟悉同学会不太友好。

如果是已经开发的差不多了的项目，不想再折腾了，其实很简单可以直接在前端做好路由表，然后在路由守卫上添加好一些权鉴的功能。
最简单的实现你的需求 "鉴权并实现未登录自动跳到首页" 的话，直接把登录时返回的token存储在 localStorage 里面就可以，然后再路由守卫中判断一下就好了。

const whiteList = ['/login']

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem("token")
  if (!!token||whiteList.includes(to.path)) {
    next()
  } else {
    next('/login')
  }
}

如果说了除了登录的校验，还需要增加角色权鉴的话，也可以把路由表稍微修一下，把登陆返回的用户角色类型也存起来，例如我早期的一个项目就是这样写的权鉴：

import store from './store'
const agent = {
  path: "/agent",
  name: "agent",
  redirect: "/agent/dashboard",
  component: () => import("views/routerView"),
  children: [
    {
      path: "dashboard",
      name: "agent-dashboard",
      component: () => import("views/agent/dashboard")
    },
    //...
  ],
  beforeEnter: (to, from, next) => {
    // 判断是已经登录 并且 角色名称为 `agent`
    if (store.getters.token && store.getters.role === 'agent') {
      next();
    } else {
      store.dispatch('user/logout')
      next("/login");
    }
  }
};