vue实现权限控制路由(vue-router 动态添加路由)
用户登录后返回权限菜单，前端根据权限菜单动态添加路由，然后再动态生成菜单栏。
思路如下：
一、定义初始化默认路由。
二、动态配置路由，这里是把所有组件中相应的路由配置成一个个的对象，根据后台返回的菜单tree一个个去匹配。
三、通过匹配，把匹配好的路由数据addRoutes到路由中。
四、为了防止刷新页面后路由数据被清空，这里用判断是否登录的方式，再次加载动态路由。
具体代码如下：
router.js
import Vue from 'vue'
import {router} from './index'
import login from '@/views/login/login'
import layout from '@/views/layout/layout'
import home from '@/views/home/home.vue'
import depDsStorageList from '@/views/home/homePage1/depDsStorageList.vue'
// 数据管理
import dataSourceAdmin from '@/views/dataManage/dataSourceAdmin/dataSourceAdmin'
import dataPoolAdmin from '@/views/dataManage/dataPoolAdmin/dataPoolAdmin'
import buildSqlTable from '@/views/dataManage/buildSqlTable/buildSqlTable'
import complianceDetectionFunction from '@/views/dataManage/complianceDetectionFunction/complianceDetectionFunction'
import tablePreview from '@/views/dataManage/dataSourceAdmin/tablePreview/tablePreview.vue'
import dataAssetsManage from '@/views/dataManage/dataAssetsManage/dataAssetsManage.vue'
//标准管理
import codeItemManage from '@/views/standardManage/codeItemManage/codeItemManage'
import metadataManage from '@/views/standardManage/metadataManage/metadataManage'
import standardFileManage from '@/views/standardManage/standardFileManage/standardFileManage'
import determinerManage from '@/views/standardManage/determinerManage/determinerManage'
//数据服务
import dataServiceAdmin from '@/views/dataService/dataServiceAdmin/dataServiceAdmin.vue'
import customizedServiceAdmin from '@/views/dataService/customizedServiceAdmin/customizedServiceAdmin.vue'
//系统管理
import labelManage from '@/views/systemManage/labelManage/labelManage.vue'
import roleMenu from '@/views/systemManage/role-menu/role-menu.vue'
import userAdmin from '@/views/systemManage/user-admin/user-admin.vue'
import roleAdmin from '@/views/systemManage/role-admin/role-admin.vue'
//权限
import haveNoAuthority from '@/views/systemManage/NoAuthority/haveNoAuthority'
import haveNotFound from '@/views/systemManage/NoAuthority/haveNotFound'
//初始化默认路由
export let initMenu = [
{path: '', redirect: '/login'},
{
path: '/login',
name: 'login',
component: login
},
{
path: '/haveNoAuthority',
name: 'haveNoAuthority',
component: haveNoAuthority
},
{
path: '/haveNotFound',
name: 'haveNotFound',
component: haveNotFound
},
{
path: '',
redirect: '/depDsStorageList',
component: layout,
children: [
{
path: 'depDsStorageList',
name: '首页内容列表',
component: depDsStorageList,
},
],
},
{
path: '',
redirect: 'addDataService',
component: layout,
children: [
{
path: 'addDataService',
name: '新增数据服务',
component: () => import('@/views/dataService/dataServiceAdmin/addDataService.vue'),
},
],
},
{
path: '',
redirect: '/dataPoolAdmin',
component: layout,
children: [
{
path: 'dataPoolAdmin',
name: '数据池管理',
component: dataPoolAdmin
},
],
},
{
path: '',
redirect: '/tablePreview',
component: layout,
children: [
{
path: 'tablePreview',
name: '表关系预览',
component: tablePreview
},
],
},
]
//动态配置路由
export let menu = {
"首页": {
path: '',
redirect: '/home',
component: layout,
children: [
{
path: 'home',
name: '首页',
component: home,
}
],
},
"标准数据服务": {
path: '',
redirect: '/dataServiceAdmin',
component: layout,
children: [
{
path: 'dataServiceAdmin',
name: '标准数据服务',
component: dataServiceAdmin,
}
],
},
"定制数据服务": {
path: '',
redirect: '/customizedServiceAdmin',
component: layout,
children: [
{
path: 'customizedServiceAdmin',
name: '定制数据服务',
component: customizedServiceAdmin,
}
],
},
"数据源管理": {
path: '',
redirect: '/dataSourceAdmin',
component: layout,
children: [
{
path: 'dataSourceAdmin',
name: '数据源管理',
component: dataSourceAdmin,
}
],
},
"数据资产管理": {
path: '',
redirect: '/dataAssetsManage',
component: layout,
children: [
{
path: 'dataAssetsManage',
name: '数据资产管理',
component: dataAssetsManage,
}
],
},
"标签管理": {
path: '',
redirect: '/labelManage',
component: layout,
children: [
{
path: 'labelManage',
name: '标签管理',
component: labelManage,
},
],
},
"标准规范管理": {
path: '',
redirect: '/standardFileManage',
component: layout,
children: [
{
path: 'standardFileManage',
name: '标准规范管理',
component: standardFileManage
},
],
},
"数据元管理": {
path: '',
redirect: '/metadataManage',
component: layout,
children: [
{
path: 'metadataManage',
name: '数据元管理',
component: metadataManage
},
],
},
"限定词管理": {
path: '',
redirect: '/determinerManage',
component: layout,
children: [
{
path: 'determinerManage',
name: '限定词管理',
component: determinerManage
},
],
},
"代码项管理": {
path: '',
redirect: '/codeItemManage',
component: layout,
children: [
{
path: 'codeItemManage',
name: '代码项管理',
component: codeItemManage
},
],
},
"依标建库": {
path: '',
redirect: '/buildSqlTable',
component: layout,
children: [
{
path: 'buildSqlTable',
name: '依标建库',
component: buildSqlTable
},
],
},
"合规检测": {
path: '',
redirect: '/complianceDetectionFunction',
component: layout,
children: [
{
path: 'complianceDetectionFunction',
name: '合规检测',
component: complianceDetectionFunction
},
],
},
"用户管理": {
path: '',
redirect: '/userAdmin',
component: layout,
children: [
{
path: 'userAdmin',
name: '用户管理',
component: userAdmin
},
],
},
"权限管理": {
path: '',
redirect: '/roleAdmin',
component: layout,
children: [
{
path: 'roleAdmin',
name: '权限管理',
component: roleAdmin
},
],
},
"角色资源管理": {
path: '',
redirect: '/roleMenu',
component: layout,
children: [
{
path: 'roleMenu',
name: '角色资源管理',
component: roleMenu
}
],
}
}
export let menuList = []
export const setMenuTree = function (menuTree) {
let temp = new Vue({router})
hanleFor(menuTree)
temp.$router.addRoutes(menuList)
temp.$router.addRoutes([{path: '*', redirect: '/' + menuList[0].redirect}])
}
const hanleFor = function (list){
for (var i=0; i<list.length; i++) {
if (list[i].children) {
hanleFor(list[i].children)
}else{
menuList.push(menu[list[i].name])
}
}
}
export const routers = {
router: initMenu
}
index.js
import Vue from 'vue'
import iView from 'iview'
import lodash from 'lodash'
import VueLodash from 'vue-lodash'
import Router from 'vue-router'
import { routers, menuList, setMenuTree } from './routers';
import 'iview/dist/styles/iview.css'
Vue.use(Router);
Vue.use(iView);
Vue.use(VueLodash, lodash);
export const router = new Router({
routes: routers.router
})
export let getMenuFuc = function (list) {
setMenuTree(list)
}
if (sessionStorage.getItem("role")) {
getMenuFuc(JSON.parse(sessionStorage.getItem("menuTree")))
}
router.beforeEach((to, from, next) => {
if (!sessionStorage.getItem("role") && to.name !== 'login') {
next('/login')
} else {
next()
}
})
login.vue
<template>
<div class="jq22-container loginBody" style="padding-top:100px; width: 100%; height: 100%;">
<div class="login-wrap" @keydown.enter="handleSubmit">
<div class="login-html">
<p class="title">江苏消防数据资源管理服务平台</p>
<div class="hr"></div>
<div class="login-form">
<div class="sign-in-htm">
<Form ref="loginForm" :model="form" :rules="rules">
<div class="group group1">
<FormItem prop="account">
<Icon :size="20" type="person" class="icon-user"></Icon>
<input v-model="form.account" type="text" class="input" placeholder="用户名">
</FormItem>
</div>
<div class="group">
<FormItem prop="password" v-show="hidePass">
<Icon :size="16" type="locked" class="icon-pass"></Icon>
<div @click="showPwd"><Icon :size="22" type="eye-disabled" class="eyeDisabled"></Icon></div>
<input v-model="form.password" type="password" class="input" data-type="password" placeholder="密码">
</FormItem>
<FormItem prop="password" v-show="showPass">
<Icon :size="16" type="locked" class="icon-pass"></Icon>
<div @click="hidePwd"><Icon :size="22" type="eye" class="eyeDisabled"></Icon></div>
<input v-model="form.password" type="text" class="input" data-type="text" placeholder="密码">
</FormItem>
</div>
<div class="group">
<!--<FormItem prop="code">-->
<FormItem prop="code">
<Icon :size="18" type="android-checkmark-circle" class="icon-pass"></Icon>
<input v-model="form.code" type="text" class="input" data-type="text" placeholder="验证码" maxlength="4">
<img id="imgObj" alt="验证码" :src="cfg.api.obtain" @click="changeImg"/>
</FormItem>
</div>
<!--<div class="group">
<input id="check" type="checkbox" class="check" checked>
<label for="check"><span class="icon"></span> 记住密码</label>
<a href="#forgot" rel="external nofollow" style="float: right">忘记密码?</a>
</div>-->
<Alert type="error" v-show="error">
<span style="color: red">{{errorMessage}}</span>
</Alert>
<div class="group">
<input type="button" class="button" value="登录" @click="handleSubmit">
</div>
</Form>
</div>
</div>
<div span="8" v-show="spinShow">
<Spin fix>
<Icon type="load-c" size=50 class="demo-spin-icon-load"></Icon>
<div>登录中，请稍后...</div>
</Spin>
</div>
</div>
</div>
</div>
</template>
<style>
@import "./login.css";
</style>
<script src="./loginJs.js"></script>
login.css
body{
margin: 0 auto;
padding: 0;
width: 100%;
color:#6a6f8c;
background: url("./img/login_1.png");
background-size: cover;
}
body,html,.loginBody{
height: 100%;
}
input, button {
outline: none;
border: none;
}
.title{
text-align: center;
color: #f3f3f3;
font-size: 24px;
margin-bottom: 40px;
font-weight: bold;
}
.login-wrap{
width:100%;
margin: auto;
max-width:400px;
min-height:500px;
position:relative;
background:url(./img/login_1.png);
box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
margin-top: 4%;
}
.login-html{
width:100%;
height:100%;
position:absolute;
background:rgba(40,57,101,.9);
padding: 50px 20px 30px 20px;
}
.ivu-form-item-content{
height: 50px;
}
.login-form .group1{
position: relative;
}
.icon-user{
position: absolute ;
left: 10px;
top: 12px;
z-index: 5;
color: #666;
}
.login-form .group2{
position: relative;
padding-bottom: 10px;
}
.icon-pass{
position: absolute ;
left: 10px;
top: 13px;
z-index: 5;
color: #666;
}
#imgObj{
position: absolute ;
width:40%;
height: 30px;
z-index: 5;
left: 58%;
top: 7px;
border-radius:15px;
opacity: 0.7;
}
.eyeDisabled{
position: absolute ;
left: 91%;
top: 10px;
z-index: 5;
color: #666;
}
.eyeDisabled:hover{
cursor: pointer;
}
.login-form .group .input{
width:100%;
color:#fff;
display:block;
text-indent: 23px;
font-size: 15px;
border:none;
padding:5px 10px;
border-radius:25px;
background:rgba(255,255,255,.1);
}
.login-form .group .button{
width:100%;
color:#fff;
display:block;
border:none;
padding:15px 20px;
border-radius:25px;
background:rgba(255,255,255,.1);
margin-top: 20px;
}
.login-form .group input[data-type="password"]{
text-security:circle;
-webkit-text-security:circle;
}
.login-form .group .button{
background:#1161ee;
}
.hr{
height:2px;
margin:20px 0 30px 0;
background:rgba(255,255,255,.2);
}
.foot-lnk{
text-align:center;
}
#imgObj:hover{
cursor: pointer;
}
.demo-spin-icon-load{
animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
from { transform: rotate(0deg);}
50% { transform: rotate(180deg);}
to { transform: rotate(360deg);}
}
loginJs.js
import {getMenuFuc} from '../../router/index'
export default {
data () {
return {
form: {
account: 'admin',
password: '123456',
code: ''
},
rules: {
account: [
{ required: true, message: '账号不能为空', trigger: 'blur' }
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' }
],
code: [
{ required: true, message: '验证码不能为空', trigger: 'blur' }
]
},
showPass: false,
hidePass: true,
error: false,
errorMessage: '',
token: '',
imgUrl: '',
validate: '',
spinShow:false
};
},
created (){
let _this = this
_this.token = this.getCookie('token')
_this.changeImg()
$(".demo-spin-col").height($("body").height())
},
methods: {
showPwd () {
this.hidePass = false
this.showPass = true
},
hidePwd () {
this.hidePass = true
this.showPass = false
},
handleSubmit () {
let _this = this
_this.$refs.loginForm.validate((valid) => {
if (valid) {
_this.spinShow = true
_this.$ajax.post(_this.cfg.api.login, _this.form).then(function(res){
if(res.data.result){
_this.setCookie('token',res.data.token, 365)
let role = res.data.data.role
var roleString = ''
for (var i=0; i<role.length; i++) {
if (i == role.length-1) {
roleString += role[i].roleName
}else{
roleString += role[i].roleName + ','
}
}
sessionStorage.setItem("account",_this.form.account)
sessionStorage.setItem("role",roleString)
let menuTree = res.data.data.menuTree
sessionStorage.setItem("menuTree",JSON.stringify(menuTree))//用于layout页面加载菜单
let buttonList = res.data.data.buttonList //存储按钮的权限控制
sessionStorage.setItem("buttonList",JSON.stringify(buttonList))
getMenuFuc(menuTree)
_this.$router.push('home');
_this.error = false
}else{
_this.error = true
_this.errorMessage = res.data.message
_this.form.code = ''
_this.changeImg()
}
_this.spinShow = false
}).catch((error)=>{ _this.spinShow = false});
}
});
},
changeImg() {
var imgSrc = $("#imgObj");
var src = imgSrc.attr("src");
imgSrc.attr("src", this.changeUrl(src));
},
changeUrl(url) {
var timestamp = (new Date()).valueOf();
var index = url.indexOf("?",url);
if (index > 0) {
url = url.substring(0, index);
}
if ((url.indexOf("&") >= 0)) {
url = url + "×tamp=" + timestamp;
} else {
url = url + "?timestamp=" + timestamp;
}
return url;
}
}
};
以上这篇vue实现权限控制路由(vue-router 动态添加路由)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
Vue 权限控制的两种方法(路由验证)
下面介绍两种权限控制的方法: 路由元信息(meta) 动态加载菜单和路由(addRoutes) 路由元信息(meta) 如果一个网站有不同的角色,比如 管理员 和 普通用户 ,要求不同的角色能访问的页面是不一样的 这个时候我们就可以 把所有的页面都放在路由表里 ,只要 在访问的时候判断一下角色权限 .如果有权限就让访问,没有权限的话就拒绝访问,跳转到404页面 vue-router 在构建路由时提供了元信息 meta 配置接口,我们可以在元信息中添加路由对应的权限,然后在路由守卫中检查相关权限,
-
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
此案例主要实现了一个功能是,在vue实例首次运行时,在加载了login和404两个路由规则,登录成功后,根据登录用户角色权限获取该角色相应菜单权限,生成新的路由规则添加进去. 做过后台管理系统都一定做过这个功能,在对菜单权限进行粗粒度权限控制的时候,通过角色获取菜单后,异步生成菜单,所以一开始拿到需求的时候,我也以为这和平常的没什么不同,不过做起来就发现了很多问题, 1.vue-router的实例,在new vue实例的时候,就加载了,且必须加载,这个时候,登录路由一定要加载,可是这个时候没有登
-
详解基于vue-router的动态权限控制实现方案
使用vue开发带权限管理系统,尤其是采用了vue-router做路由,很多人都遇到的一个问题就是如何动态加载路由path对应的component. 典型的应用场景就是:前端菜单不静态的写在vue程序里,而是要从后台程序和数据库返回的菜单来动态加载到vue应用中. 网上很多问权限的问题,但几乎找不到很好的解决答案,在很长一段时间里,非常打击使用vue技术栈开发的信心.最有质量的一篇文章是:http://www.jb51.net/article/124801.htm 但作者并没有完全解决这个问题,还
-
关于Vue的路由权限管理的示例代码
前言 曾经在工作上对 vue 路由权限管理这方面有过研究,这几天又看到了几篇相关的文章,再加上昨天电面中又再一次提及到,就索性整理了一下自己的一些看法,希望对大家有帮助. 实现 大体上实现的思路很简单,先上图: 无非是将路由配置按用户类型分割为 用户路由 和 基本路由,不同的用户类型可能存在不同的 用户路由,具体依赖实际业务. 用户路由: 当前用户所特有的路由 基本路由:所有用户均可以访问的路由 实现控制的方式分两种: 通过vue-router addRoutes方法注入路由实现控制 通过vue
-
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
最近做vue 单页项目涉及到多角色用户权限问题,不同的角色用户拥有不同的功能权限, 不同的功能权限对应的不同的页面 git: https://github.com/pch1024/dynamicRouter 举个例子: 角色A =>功能1 =>功能2 =>功能3 角色B =>功能1 =>功能4 =>功能5 第1步 定义默认路由和动态路由 //动态路由(所有角色的都在这里,我们都做好组件页面了所以我们一定有这个,防君子不防小人) export const dynamicR
-
vue后台管理之动态加载路由的方法
在这里我们将会实现一个vue动态路由的案列,当用户登陆成功后,根据用户的角色,拿到他对应的菜单信息,并将它动态的载入到我们的路由中. 我们的通用的后台管理系统中,我们会根据权限的粗细不同,会对每个角色每个权限每个资源进行控制.同样的我们也需要实现一个这样的功能. 这篇文章我将主要讲vue端的实现,关于后台接口我就不会涉及,当我接触的时候我们的后台接口是springcloud实现. 一.思路 在vue-router对象中首先初始化公共路由,比如(404,login)等,然后在用户登陆成功,根据用户
-
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-router还有一个addRoutes的API,立马研究了一下. router.addRoutes: 函数签名: router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合routes选项要求的数组. 点这里去
-
vue addRoutes实现动态权限路由菜单的示例
需求 最近接手一个后台管理系统,需要实现导航菜单从后台拉取的效果:根据登录用户的权限不同分别拉出来的导航菜单也不一样,另外可操作的界面也存在区别. 问题 因为后台管理系统是准备使用vue+vue-router+element-ui+vuex的搭配来做的,可是单页应用在进入页面之前就已经将vue-router实例化并且注入vue实例中了,所以在进入登录页面的时候旧没办法在重新定制路由了.接下来各种百之谷之,发现vue-router在2.0版本中提供了addRoutes方法添加路由,希望的曙光出现.
-
vue实现权限控制路由(vue-router 动态添加路由)
用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏. 思路如下: 一.定义初始化默认路由. 二.动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配. 三.通过匹配,把匹配好的路由数据addRoutes到路由中. 四.为了防止刷新页面后路由数据被清空,这里用判断是否登录的方式,再次加载动态路由. 具体代码如下: router.js import Vue from 'vue' import {router} from './i
-
关于vue中根据用户权限动态添加路由的问题
根据用户的权限,展示不同的菜单页. 知识点 路由守卫(使用了前置守卫):根据用户角色判断要添加的路由 vuex:保存动态添加的路由 难点 每次路由发生变化时都需要调用一次路由守卫,并且store中的数据会在每次刷新的时候清空,因此需要判断store中是否有添加的动态路由. (若没有判断 则会一直添加 导致内存溢出) 根据角色判断路由 过滤动态路由 判断每条路由角色是否与登录传入的角色一致 <template> <div> <el-menu :default-active=&q
-
Vue 页面权限控制和登陆验证功能的实例代码
页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. Vue 动态添加路由及生成菜单 这是我写过的一篇文章, 通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法. 另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限.如果有权限就让访问,没有权限就拒绝,跳转到 404 页面. 思路: 在每一个路由的 meta 属性里,将能
-
Vue 动态添加路由及生成菜单的方法示例
写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单. 为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的. 在网上找了好多资料,终于想到了解决办法. 动态生成路由 利用 vue-router 的 addRoutes 方法可以动态添加路由. 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合 routes 选项要求的数组.
-
vue路由结构可设一层方便动态添加路由操作
动态添加路由基本功能 let routes=[{ path: '/login', name: 'login', component: () => import('../components/Login.vue') }] this.$router.addRoutes(routes) 涉及多层路由嵌套 如图 单纯使用addRoutes 层级结构不同 修改路由结构 例: { name:'account', path: '/account/account', meta: { title: '个人中心',
-
vue 解决addRoutes动态添加路由后刷新失效问题
前言 某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正. 应用场景:用户a登录进系统,页面上有个按钮,点击之后会动态添加路由并且跳转,跳转过去之后,用户刷新后也会停留在当前页面. 不点这个按钮,浏览器输入地址,用户会跳到404页面 github:https://github.com/Mrblackant/keepRouter/tree/master 思路 1.用户点击
-
vue 按钮 权限控制介绍
目录 一.步骤 1.定义buttom权限 2.定义store 3.创建permission指令 4.使用permission指令 5.删除无权限数据 6.传入状态管理数据 二.概况 前言: 在日常项目中,会碰到需要根据后台接口返回的数据,来判断当前用户的操作权限.必须当有删除权限时,就显示删除按钮.没有这个权限时,就不显示或者删除这个按钮.通过查找资料,通过vuex来实现这个功能. 一.步骤 1.定义buttom权限 在state中创建buttomPermission,用于保存后台接口返回的权限
-
vue3动态添加路由
目录 前言 一.初始化项目 二.添加“vip”路由 三.总结 前言 有的时候我们需要根据不同的用户身份生成不同的路由规则,例如: vip用户应该有自己的vip页面所对应的专用路由. 一.初始化项目 初始化vite + vue + ts项目,引入vue-router.目录结构如下,注意这个404重定向,vue3不支持直接使用“*”匹配所有路由了,要使用:catchAll(.*). 初始化路由: import {createRouter, createWebHashHistory} from "vu
-
基于vue,vue-router, vuex及addRoutes进行权限控制问题
基于vuex, vue-router,vuex的权限控制教程,完整代码地址见 https://github.com/linrunzheng/vue-permission-control 接下来让我们模拟一个普通用户打开网站的过程,一步一步的走完整个流程. 首先从打开本地的服务localhost:8080开始,我们知道打开后会进入login页面,那么判断的依据是什么. 首先是token. 没有登陆的用户是获取不到token的,而登陆后的角色我们会将token存到local或者seesionStor